System and Method for Extending Scalable Vector Graphics Capabilities 



FIELD OF THE INVENTION 

The invention relates to web application development. In particular, the invention 
5 relates to a system and method for extending scalable vector graphics capabilities. 

BACKGROUND OF THE INVENTION 

Scalable Vector Graphics (SVG) has the potential to become the platform (markup 
language) of choice for building robust, dynamic and interactive wreb applications. 

10 However, SVG lacks many features that are desired for building such web applications. 

Features that are missing in SVG include coordinate mapping, projection mapping, mouse 
tracking, zooming, panning, selection ability, flow control, moving objects, zoom/pan 
inunimity, and constraints. 

Since these features are missing from SVG, building robust web applications 

15 requires extensive scripting. For example, a scripting language such as European 

Computer Manufacturers Association Script (ECMAScript) is required. There are many 
problems with lising script. One problem is the fact that most web designers do not have 
the programming skills required for scripting. 

One way to manipulate a DOM is to use scripting. However, many web designers 

20 do not have the programming skills required for DOM manipulation via scripting. Thus, 
programmers are needed to create the scripts for the designer. Programmers can be 
costly, plus it can take a long time to develop stable, fast code. Thus, it is desirable to 
have a system or method of manipulating a DOM that a designer with minimal 
programming knowledge may operate, and which could also aid even an experienced 

25 programmer to rapidly develop a web application. 

One way of assisting designers and developers is to have pre-canned scripts for 
the most commonly required functionality. However, script is difficult to auto-generate. 
Supporting the insertion of pre-canned scripts via an integrated development environment 
(IDE) is both complicated and limiting. For example, the Microsoft (TM) Visual Studio 

30 IDE can create auto-generated code for its Microsoft Foundation Classes (MFC) (which 
abstract the programmer from the core Win32 API's), making it easier and quicker to 



program Windows applications. However, limits must be imposed on the user. User- 
modification of the auto-generated code is discouraged, because it makes it difficult to 
regenerate the code from the project file, or to automatically modify the pre-generated 
code as a result of new user-defined parameters to the abstractions. Auto-generated script 
5 cannot easily be customized afterwards, unless the IDE absolves itself of all responsibility 
should the designer make modifications. 

Software exists that allows one to map input XML markup to output markup, 
automatically generating extensible stylesheet language transformation XSLT (the most 
commonly used XML markup language for transforming XML markup to a different 
10 form of markup). However, script is difficult to data-map. 

Script relies on fiiU DOM support. Scripts are only as powerfiil as the DOM 
methods that the viewer supports. Although it is desirable to have all viewers support the 
entire spectrum of DOM methods, they currently do not. Thus one must write script that 
only uses the API's supported by all viewers, in order to ensure that the script works on all 
1 5 viewers (i.e., one must program towards the lowest common denominator). 

Script is complex. Abstracting the DOM methods usmg dSVG markup has 
allowed for the creation of a more direct linkage between the syntax and the intent of the 
author. Take the example of a designer creating a new element dynamically in the DOM. 
The designer wishes to create a circle at a particular location in the DOM tree. To do it in 
20 script is quite complicated, requiring over a himdred lines of code. One must first use 

getElementByldO to find the target element, and then either the parent or sibling element. 
One then uses createElementQ to create the circle. If inserting beneath a parent, 
parent.appendChildO is used. If insertmg before a sibling, siblmg.insertBeforeQ is used. 
If inserting after a sibling sibling.nextSibling.insertBeforeQ is used, unless there is no 
25 nextSibling, in which case siblmg.parenfNode.jappendChildO is used. The author may 
wish to insert it as, say, the fourth sibling fi:om the top or bottom, requiring a loop to be 
written which counts the siblings and accounts for the fact that maybe there are not that 
many siblings. Or the author may wish the new element to be the parent of existing 
elements, which requkes removal of those elements and appending them as the children 
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of the new one. Then finally setAttributeQ is used to set its identifier (ID) so that you can 
refer to it later. 

Script is slower than native code. Scripts are interpreted, and thus provide slower 
performance than what would be possible with a natively-implemented markup language. 
5 Just having a script interpreter is a lot of overhead for a small device. 

Script must use DOM interfaces. Scripts can only manipulate the DOM via the 
DOM methods, which are abstractions on top of the real object model used by the viewer. 
Natively-implemented markup could access the real object model directly, which may 
improve performance even more. 
1 0 Script requhes more data to transfer. Scripts greatly add to the amount of data 

needed to be transferred. This is a problem especially for small devices. 

Finally, scripts are only as powerful as the DOM API's that the viewer supports. 
Currently, not all viewers support the entire spectrum of DOM API's.Thus, in order to 
ensure that the script will work on all viewers, one must write script that only uses the 
15 API's supported by all viewers. 

The algorithm for determining the polynomial coefficients firom a series of point- 
pairs is known as Singular Value Decomposition, which solves, in a least square sense, 
the overdetermined set of equations: 

20 Xi'=AXi + Byi + C 

yi' = Dxi + Eyi + F 

given 3 or more coordinate pairs {Xi', yC ; Xj, y;} . 

There exists software that has user interface (UI) for creating the point-pairs as 
25 weU as a macro language for pullmg the point-pairs in &om a file, calculating the 

coefficients and transforming one coordinate space to another. The software can also 
convert between many different projection systems, using known algorithms. This 
software, however, does not support an XML markup language. 
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SUMMARY OF THE INVENTION 

It is an object of the invention to provide a novel system and method of 
manipulating a document object model that obviates or mitigates at least one of the 
problems described above. 

In an aspect of the present invention, there is provided a system for extending 
interactivity of presentation markup languages. The system comprises a collection of 
designated elements, a collection of associated instructions for performing functions on 
elements in the document object model, the instructions associated with the designated 
elements, and an initialization function for directing the processing of one or more 
designated elements in the document object model. Each designated element comprises a 
name following a predetermined naming convention, and attributes for describing features 
of the designated element. 

In another aspect of the present invention, there is provided a method of extending 
interactivity of presentation markup languages. The method comprises one or more of 
controlling statement flow of a web application, coordinate mapping of a web application, 
manipulating viewer behavior with respect to a web application, focussing a group of 
elements in a web application, constraining manipulable attributes of an element in a web 
application, and applying passive behavior to an element of a web application. 

The controlling statement flow of a web application method comprises the steps of 

searching for a flow control element in a document object model of the web application, 
generating a function name associated with the flow control element, calling the 
generated function name and processing child elements of the flow control element. 

The coordinate mapping of a web application method comprises the steps of 
searching for a coordinate mapping element in a document object model of the web 
application, generating a function name associated with the coordinate mapping element, 
and calling the generated ftmction name. 

The manipulating viewer behavior with respect to a web application method 
comprises the steps of searching for a viewer behavior element in a document object 
model of the web application, generating a function name associated with the viewer 
behavior element, and calling the generated function name. 



The focxissing a group of elements in a web application method comprises the 
steps of searching for a focus element in a document object model of the web application, 
generating a function name associated with the focus element, and callii^ the generated 
function name. 

The constraining manipulable attributes of an element in a web application 
method comprises the steps of searching for a constraint element in a document object 
model of the web application, generating a fimction name associated witfi the constraint 
element, and calling the generated function name. 

The applying passive behavior to an element of a web appUcation method 
comprising the steps of searching for a designated attribute of the element in a document 
object model of the web application, generating a function name associated with the 
designated attribute, and calling the generated function name. 

In another aspect of the present invention, there is provided a method of extending 
interactivity of presentation markup languages. The method comprises the steps of 
searching for a designated control element in the document object model, and calling a 
function associated with the designated control element. 

In another aspect of the present invention, there is provided a method of 
controlling features of a web application. The method comprises the steps of adding a 
behavior element as a child of a designated element, receiving an event which is equal to 
an event attribute setting in the behavior element, and calling a script associated with the 
behavior element. 

BRIEF DESCRIPTIONS OF THE DRAWINGS 

Figure 1 shows a typical web display environment for displaying web pages and 
web applications. 

Figure 2 shows an example of a scalable vector graphics interactivity extension 
system, in accordance with an embodiment of the present invention. 

Figure 3 shows another example of a scalable vector graphics interactivity 
extension system, in accordance with the scalable vector graphics interactivity extension 
system. 



Figure 4 is a flowchart of an example of a method of manipulating a document 
object model of a web application at load time, in accordance with the scalable vector 
graphics interactivity extension system. 

Figure 5 is a flowchart of a method of a method manipulating a document object 
model of a web appUcation in response to an event, in accordance with the scalable vector 
graphics interactivity extension system. 

Figure 6 is a flowchart of another example of an method of manipulating a 
document object model of a web application, in accordance with the scalable vector 
graphics interactivity extension system. 

Figvjre 7 

DETAILED DESCRIPTION OF THE PREFERRED EMBODIMENTS 

Figure 1 shows a typical web display environment 10 for displaying web pages 
and web applications. A web display environment 10 comprises a browser 11, a viewer 
13, a script interpreter 14, and a DOM 15. The browser 1 1 is the host application, which 
understands and visually renders hypertext markup language (HTML) and/or extensible 
hypertext markup language (XHTML). Examples of browsers include Netscape (TM) 
and Internet Explorer (TM). The browser 1 1 includes a window which is displayed on the 
display apparatus, such as a monitor, of an end user computer system. The browser 1 1 
typically employs a plug-in architecture, in which third party software (known as the 
plug-in or viewer 13) can be associated with any file format that is not aheady natively 
supported by the browser 1 1 and is allowed to render that file within the host browser's 
1 1 window. One type of file that the browser 1 1 may be asked to open is a Scalable 
Vector Graphic (SVG) file having a ".svg" extension. The browser 1 1 does not natively 
support the SVG markup language (which is an XML language) and so passes the SVG 
file to the SVG viewer 1 3 , which has associated itself to the SVG file format, yia the rules 
of the plug-in architecture of the browser 1 1. 

The viewer 1 3 comprises software code for parsing the SVG markup, creating a 
DOM, rendering that DOM to the browser's window, listening for events and dispatching 
them to their assigned handler script fimctions, and interpreting/executing those script 



functions. An example of a viewer 13 is the Corel (TM) SVG Viewer. The viewer 13 
uses the SVG file received firom the browser 1 1 to create a DOM 15. The DOM is a 
hierarchical tree structure of objects in memory, representing the hierarchical XML 
markup in the XML text file. The DOM also contains methods (also known as fimctions 
or application programming interfaces (API's)) that allow it to be queried or modified. 
The viewer 13 may also have access to a script interpreter/engine 14 , which can execute 
script code created by a programmer for the purpose of making the document non-static 
(e.g., animation) and/or interactive with the user (e.g., the user can create events with the 
mouse or keyboard, which cause something to happen) via manipulation of the DOM. 
The following common data types are used in this specification: 

• <boolean>: A <boolean> is specified as either 'true' or 'false'. 

• <integer>: An <integer> is specified as an optional sign character ('+' or '-') 

followed by one or more digits "0" to "9". If the sign character is 
not present, the nxmiber is non-negative. 
Unless stated otherwise for a particular attribute or property, the range for a 
<integer> encompasses (at a minimum) -2147483648 to 2147483647. 

Within the SVG DOM, an <integer> is represented as an long or an 
SVGAnimatedlnteger. 

• <number> (real number value): The specification of real nimiber values is 

different for property values than for XML 
attribute values. 

• The Cascading Style Sheets, level 2 (CSS2) Specification-a style sheet 

language that allows one to attach style (e.g. fonts, spacing and aural cues) 
to structured dociraients (e.g. HTML dociraients and XML 
applications)-states that a property value which is a <number> is specified 
in decimal notation (i.e., a <decimal-number>), which consists of either an 
<integer>, or an optional sign character followed by zero or more digits 
followed by a dot (.) followed by one or more digits. Thus, for 



conformance with CSS2, any property in SVG which accepts <number> 
values is specified in decimal notation only. 
• For SVG's XML attributes, to provide as much scalability in numeric 

values as possible, real number values can be provided either in decimal 
5 notation or in scientific notation (i.e., a <scientific-number>), which 

consists of a <decimal-number> immediately followed by the letter "e" or 
"E" iminediately followed by an <integer>. 
Unless stated otherwise for a particular attribute or property, a <number> has the 
capacity for at least a single-precision floating point number (ICC32) and has a range (at a 
10 minimum) of -3.4e+38F to +3.4e+38F. 

It is ireconunended that higher precision floating point storage and computation be 
performed on operations such as coordinate system transformations to provide the best 
possible precision and to prevent round-off errors. 

Conforming High-Quality SVG Viewers are required to use at least 
15 double-precision floating point (ICC32) for intermediate calculations on certain numerical 
operations. 

Within the SVG DOM, a <number> is represented as a float or an 
SVGAnimatedNumber. 

• <length>: A length is a distance measurement. The format of a <length> is a 
20 <number> optionally followed immediately by a unit identifier. 

(Note that the specification of a <number> is different for property 
values than for XML attribute values.) 
If the <length> is expressed as a value without a unit identifier (e.g., 48), then the 
<length> represents a distance in the current user coordinate system. 
25 If one of the unit identifiers is provided (e.g., 1 2nMn), then the <length> is 

processed according to the description in Units. 

Percentage values (e.g., 10%) depend on the particular property or attribute to 
which the percentage value has been assigned. Two common cases are: (a) when a 
percentage value represents a percent of the viewport (refer to the section that discusses 
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Units in general), and (b) when a percentage value represents a percent of the bounding 
box on a given object (refer to the section that describes Object bounding box units). 

Within the SVG DOM, a <length> is represented as an SVGLength or an 
SVGAnimatedLength. 

• <coordinate>: A <coordinate> represents a <length> in the user coordinate system 

that is the given distance from the origin of the user coordinate 
system along the relevant axis (the x-axis for X coordinates, the 
y-axis for Y coordinates). 
Within the SVG DOM, a <coordinate> is represented as an SVGLength or an 
SVGAnimatedLength since both values have the same syntax. 

• <uri> (Uniform Resource Identifiers [URI] references): A URI is the address 

of a resource on the 
Web. For the 
specification of URI 
references in SVG, 
- - • see URI references. 

Within the SVG DOM, <uri> is represented as a DOMString or an 
SVGAnimatedString. 

Figure 2 shows a system 20 for extending the interactivity of presentation markup 
languages (e.g., scalable vector graphics (SVG), hypertext markup language (HTML)), in 
accordance with an embodiment of the present invention. The SVG interactivity 
extension system 20 comprises one or more designated elements 29, and one or moire 
associated instructions (script or code) 28. Preferably, the one or more designated 
elements 29 map to the one or more associated instructions 28 on a one-to-one basis. The 
designated elements 29 comprise a namespace and attributes. The namespace of the 
designated elements may follow a predetermined naming convention. For example, a 
prefix may be added to the generic name of the designated element 29. In one example of 
an embodiment of an SVG mteractivity extension system 20, the prefix "dsvg:" is added 
to the generic name of the designated element 29. Among the attributes of the element 



are name & xmlns (identifying that the element belongs to the dsvg). Other components 
may be added to the system 20, such as an initialization function having instractions for 
traversing each node in a DOM, searching for the designated elements 29 by searching for 
any element whose name is prefixed with the desired namespace (e.g., "dsvg:''), and 
calling the associated instructions 28 that is associated with each particular behavior 
element, whose name follows the predetermined naming convention. 

Figure 3 shows another example of an SVG interactivity extension system 30. 
The SVG extension system 30 comprises a collection of designated items 39 and a 
collection of associated instructions (script or code) 38. The collection of designated 
items 39 comprises one or more of the following: flow control elements 22, coordinate 
mapping elements 23, viewer behavior elements 24, a focus element 25, a constraint 
element 26, and a set of passive attributes 27. The collection of associated instructions 38 
comprise flow control instructions 32, coordinate mapping instructions 33, viewer 
behavior instructions 34, a focus instmction 35, a constraint instruction 36, and a set of 
passive attributes instruction 37. Items 38, 39 may be added or removed from the SVG 
interactivity extension system 30. Ah uiitialization file may be added as a component to 
the system 30 having instructions for traversing each node in a document object model- 
(DOM) and for searching and callmg functions associated with elements having names 
following a predetermined naming convention. The associated instructions 39 could be 
matched with the designated elements 38 through the initialization function (or file). 
Alternatively, the associated instructions 39 and designated elements 38 could be coded 
natively in a viewer 13. 

Flow Control Elements 22 

Flow control is desired for building web applications. With scripting, 
programmers have conditional evaluative expressions, such as "if and "switch" 
statements, and looping. 

A flow control element 22 is used to control statement flow of the web 
application. Flow control elements are used for conditional rendering of graphical 
elements or execution of behavior elements. Flow control elements 22 are inserted in a 
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document object model (DOM) as parents of other DOM elements which are to be 
rendered or executed if the conditional flow statement of the parent flow control element 
is satisfied. 

The attributes of a flow control element 22 may comprise one attribute having a 
5 complex expression representing the flow control statement. Preferably, multiple 
attributes are present, with each attribute representing one item in the expression 
representing the flow control statement. Having such a one-to-one mapping of multiple 
attributes to flow control statement items is advantageous for data mapping, where a web 
application designer desires to define variables from one data type into extensible markup 
10 language (XML). The associated instruction 32 performs actions associated with the flow 
control element 22. 

Flow control elements 22 include the 'if element, the 'switch' element, the 'case' 
element, the 'default' element, and the 'loop' element. 

15 The element 

The 'if element defines a simple conditional statement which, if evaluated to tme, 
results in its child behavior elements being executed. Commonly used in conjimction with 
dSVG expressions for referencing the real-time value of element attributes. 
<!ENTITY % ifExt > 
20 <!ELEMENT dsvg:if (%Behaviors;) > 
<! ATTLIST dsvg:if 
%stdBehaviorAttrs; 

valuel %Tiext; #IMPLIED 

op %Operator; #IMPLIED 

25 value2 %Text; #IMPLIED> 

Attribute definitions: 
valuel = *<string>' 

The first of two values to be compared. 
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op = "(equal | notEqual | lessThan | greaterThan | lessThanOrEqual | 
greaterThanOrEqual)" 

The operation to use in comparing the two values. 
value2 = '<string>' 
5 The second of two values to be compared. 



Figure 4 shows a push button 101 with associated 'if behaviors. The if element 
executes or renders child elements based on a conditional if statement, (true/false). The 
example is provided below: 
10 <?xml version="1.0" standalone="no"?> 

<!DOCTYPE svg SYSTEM "../SVGdSVG.dtd"> 

<svg xmlns:dsvg="http://www.corel.coni/schemas/2002/dSVGl 1 " 

xmlns:xlink="http://www.w3.org/1999/xlink"height="410px"width="744px" 

otiload="init(evt)" viewBox="0 0 744 410"> 

15 <script type="text/ecmascript" xlink:hre^"dsvg 1 1 /dS VG.j s"/> 

<script type="text/ecmascript" xlink:href="dsvgl l/baseUI.js"/> 
<scripttype="text/ecmascript"xlink:href="dsvgll/constraint.js"/> 
<scripttype="text/ecmascript" xlink:hre^"dsvgl l/button.js"/> 
<script type="text/ecmascript" xlink:href="dsvgll/if.js"/> 

20 <script type="text/ecmascript" xlink:href="dsvgl l/setData.js"/> 

<!— template ~> 

<rectheight^"40" width="744" y="0" x="0" fill="#5f86Bl" id="title_rect"/> 
<texty="25" x="20" font-weight="bold" font-size="18" fill=" white" 
25 id="text_l ">dSVG sample behavior: condition - if 
</text> 

<line y2="350" x2="744" yl="350" xl="0" stroke-width="2" stroke="#5f86Bl" 
fill="#5f86Bl" id="bottom_line"/> 

<text y="365" x="20" font-size="12" id="content">Contentof file: 
30 dsvg:checkBox, dsvg:Button, dsvgrif, dsvg:setData 
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</text> 

<text y="3 80" x="20" font-size=" 12" id="expected">The dsvg:if element 
executes or renders child elements based on a conditional if statement, (true/felse) 
</text> 

5 

<!— addiiig behavior — > 

<dsvg:checkBox xlink:href="dsvgl l/skinCheckBox_Default.svg#skinCheckBox" 

autoScale^"true" disabled="false" selected="false" height="12" width="12" y="70" 

10 x="50" label="CheckBox" id="checkBoxl"> 

<dsvg:buttonxlink:href="dsvgll/skinButton_Windows.svg#skinButton" 

autoScale="true" disabled="false" selected="false" toggle="false" heigh1="18" 
width="100" y="100.5" x="50.5" label="Check State" id="dsvgUniqueID_l"> 

<dsvg:if value2="true" op="equal" value l="%checkBoxl@selected%" 

15 id="dsvgUniqueID_2"> 

<dsvg:setData value="Check box selected state is true." 

elementID="labell " id="dsvgUniqueID_3"/>. 

</dsvg:if> 

<dsvg:if value2="true" op="notEqual" valuel="%checkBoxl@selected%" 

20 id="dsvgUniqueID_4"> 

<dsvg:setData value="Check box selected state is false." 

elementID="labell" id="dsvgUniqueID_5"/> 

</dsvg:if> 

</dsvg:button> 

25 <texty="150"x="50"fill="#5f86Bl"id="labell">Label 
</text> 

<Jsvg> 

The 'switch' element 
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The 'switch' element defines a conditional statement, comparing one value to other 
values defined in child "case* elements. Commonly used in conjunction with dSVG 
expressions for referencing the real-tune value of variables or element attributes. 
<!ENTITY % switchExt "" > 
5 <!ELEMENT dsvg:switch (%Behaviors;) > 
O.ATTLIST dsvg-.switch 
%stdBehaviorAttrs; 

variable %Text; #IMPLIED> 

10 Attribute definitions: 
variable = '<string>' 

Specifies the value to compare against many others, which are defined in the child 
•case' elements. Usually, 'variable' will be a dSVG expression. 

15 Figure 5 shows a comboBox 105 with an associated 'switch' behavior, resulting in 

one of four 'setData' behaviors being run. The switch element compares conditions of the 
child case element(s) along with the default element values. The example is provided 
below: 

<?xml version=" 1 .0" standalone="no" ?> 
20 <!DOCTYPE svg SYSTEM "../SVGdSVG.dtd"> 

<svg xmlns:dsvg="ht^://www.corel.com/schemas/2002/dS VGH " 
' xmhis:xlink=''http://www.w3.org/1999/xlink'' height=''410px'' width=''744px'^ 

onload="init(evt)" viewBox="0 0 744 410"> 

<script type="text/ecmascript" xlink:href="dsvgl l/dSVG.js"> 
25 <script type="text/ecmascript" xlink:href="dsvgl l/baseUI.js"> 

<script type="text/ecmascript" xlink:href="dsvgl l/constraint.js"/> 
<script type="text/ecmascript" xlink:href^"dsvgll/spinBox.js"A> 

<script type="text/ecmascript" xlink:href="dsvgl l/textbox.js"/> 
<script type="text/ecmascript" xlink:href^"dsvgll/button.js"/> 
30 <script type="text/ecmascript" jdink:href="dsvgl l/switch.js"/> 
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<script type="text/ecmascript" xlink:href="dsvgl l/setData.js"/> 



<!— template —> 

<rect height="40" width="744" y="0" x="0" fill="#5f86B 1 " id="title_rect"/> 
<texty="25" x="20" font-weight="bold" font-size="18" fill=" white" 
id="text_l ">dSVG sample behavior: condition - switch 
</text> 

<line y2="350" x2="744" yl="350" xl="0" stroke-width="2" stroke=*'#5f86Bl" 
fill="#5f86B 1 " id="bottom_line"/> 

<text y="365" x="20" font-size=" 12" id="content">Content of file: 
dsvg:spinBoXi dsvg:switch, dsvg:case, dsvg:default 

</text> 

<text y="380" x="20" font-size="12" id="expected">The dsvg: switch element 
compares conditions of tiie child dsvg:case element(s) along with tiie dsvg:default 
element values. 

</text> " 

<!-- adding behavior --> 

<texty="150" x="50" fill="#5f86Bl" id="label">Label 
</text> 

<dsvg:spinBox selected-'false" 
xlink:href="dsvgl l/skinSpinBox_Composite.svg#skinSpinBox" autoScale="true" 
disabled="false" increment="l" value="l" max="5" min="0" height="18" widtii="118" 
y="70" x="50" label="Spin box" id="spin"> 

<dsvg:switch variable="%spin@value%" id="dsvgUniqueID_4"> 
<dsvg:case valvie="r' id="dsvgUniqueID_5"> 

<dsvg:setData value- 'Value is 1, minimum" 
elemenaD="label" id="dsvgUniqueID_7"/> 
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</dsvg:case> 

<dsvg:case value="2'* id="dsvgUniqueID_6"> 

<dsvg:setData value="Value is two" elementID="laber' 

id="dsvgUniqvieID_8"/> 

</dsvg:case> 

<dsvg:case value="3" id="dsvgUniqueID_7"> 

<dsvg:setData value="Value is THREE!" 

elementID="Iabel"id="dsvgUniqueID_9"/> 

</dsvg:case> 

<dsvg:defavilt id="dsvgUniqueID_8"> 

<dsvg:setData value="value is other than one two three" 
eIementID="label" id="dsvgUniqueID_10"> 

<dsvg:default> 
</dsyg:switch> 
</dsvg:spinBox> 

<text y="70" x="200" id="text_a">Switch: CASE for valxies 1 ,2,3 
</text> 

<text y="90" x="200" id="text_b">Switch: DEFAULT for other values 

</text> 

1 x="200" id="text_c">In all cases, the value will be reflected in the 

Label. 

</text> 

</svg> 

The 'case' element 

The 'case' element is a child of the-'switch' element, which defines the value to 
compare to the 'switch' element's 'value' attribute. If it evaluates to true, its child elements 
are executed. Commonly used in conjunction with dSVG expressions for referencing the 
real-time value of variables or element attributes. 
<!ENTITY % caseExt "" > ■ . 
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<!ELEMENT dsvgxase (%Behaviors;) > 
<! ATTLIST dsvgicase 

%st<lBehaviorAttrs; 

value %Text; #IMPLIED > 

5 • ■ ■. . 

Attribute definitions: 

value = '<string>' 

Specifies the value to compare gainst the 'switch' element's 'value' attribute. 
Usually, 'value* will be a dSVG expression. 

10 

The 'default' element 

The 'default' element is a child of the 'switch' element, whose child behaviors are 
executed whenever none of the 'switch' element's 'case' elements evaluate to true. 
Commonly used in: conjunction with dSVG expressions for referencing tiie real-tune 
15 value of variables or element attributes. 
<!ENTITY % defaultExt "" > 
<!ELEMENT dsvg:default (%Behaviors;) > 
<! ATTLIST dsvg:default 
%stdBehaviorAttrs; > 

20 

The 'loop' element 

The 'loop' element allows its child behaviors to be executed iteratively (like a 'for' 
statement in ECMAscript) and/or upon multiple targets (like a 'for-each' statement in 
ECMAScript). A node list of multiple targets can be obtained fi:om tiie 'findElements' 

25 element, which allows you to find all elements which match tiie specified search criteria. 
Optionally, tiie actual matching elements can be copied to a documentFragment, which 
can be used by the 'postURL' element. 
<!ENTITY % loopExt "" > 
<!ELEMENT dsvg:loop ANY > 

30 <! ATTLIST dsvg:loop 
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%stdBehaviorAttrs; 
elementlDs %Text;#IMPLIED 
nodeList %Text;#IMPLIED 



elementID 

from 

to 

increment 
value 



ID; 

%Integer; 
%Integer; 
%Integer; 
%Integer; 



#IMPLIED 
#IMPLIED 
#IMPLIED 
#IMPLIED 
#IMPLIED > 



Attribute definitions: 

elementlDs = •<string>' 

The search string to compare against the 'id' attribute of every element in the 
DOM (or as a child of a specified parent element). It can contain the wildcard "*" 
character to denote "any string". Whenever an element is found whose ID matches 
this search string, the child behaviors will be executed. For example, 
elementIDs="myCircle*" would match elements with the ID's "myCirclel" and 
"myCircleRed", whereas elementIDs="*Circle* " would match elements with the 
ID'S "myCirclel " and "hisCirclel". 

nodeList = '<string>' 

The identifier for the nodelist created by the 'fmdElements* behavior. All the child 
behaviors will be run for each node in the nodeList. 

elementID = "name" 

The 'id* attribute of the current node. Each iteration, the 'elementID' attribute is 
updated to correspond to the 'id' attribute of the current node. The child behaviors 
can then reference that current node via the dSVG expression syntax. 
This attribute should never be provided by the markup. It is automatically 
populated for reference purposes. 

from = "<integer>" 

The first valxie to loop on. 

from = "<integer>" 



The last value to loop on. 
interval = "<integer>" 

The amoxint to increment with each itertion. 

If this attribute is not provided, the default is 1. 
value = "<integer>" 

The value of the current iteration, between 'from' and 'to'. Each iteration, the 

•value' attribute is updated. The child behaviors can then reference that value via 

the dSVG expression syntax. 

This attribute should never be provided by the markup. It is automatically 
populated for reference purposes. 

Figure 6 shows a push button 1 1 0 that invokes the 'loop' behavior, storing the 
matches in a nodelist, and using the 'loop' element to display the ID's of the nodes via the 
'alert' element. The loop element is a sequence of instructions that is continually repeated 
until a certain condition is reached. The example is provided below: 
<?xml version=" 1 .0" standalone=^"ho"?> 
<!DOCTYPE svg SYSTEM "../SVGdSVG.dtd"> 
<svg xnilns:dsvg="http://www.corel.com/schemas/2002/dSVGH " 
xmlns:xlink="http://www.w3.org/1999/xlink" height="410px" width="744px" 
onload="init(evt)" viewBox="0 0 744 410"> 

<script type=^"text/ecmascript" xlink:href="dsvgl l/dSVG.js"/> 
<script type="text/ecmascript" xlink:href="dsvgl l/baseUI.js"> 
<script type="text/ecmascript" xlmk:href="dsvgl l/constraint.js"> 
<script type="text/ecmascript" xlink:hre^"dsvgl l/loop.js"/> 
<script type="text/ecmascript" xlink:href="dsvgl l/button.js"/> 
<script type="text/ecmascript" xlink:href="dsvgl 1/setAttribute.js"/^ 
<script type="text/ecmascript" xlink:href="dsvgl l/setData.js"A> 

<!-- template ~> 
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<rectheight="40" width="744" y="0" x="0" fill="#5f86Bl" id="title_rect"/> 
<text y="25" x="20" font-weight="bold" font-size=" 1 8" fm="white" 
id="text_r'>dSVG sample behavior: loop 

</text> 

<text y="365" x="20" font-size="12" id="content">Content of file: dsvg:loop, 
dsvg:button, dsvg:setData, dsvg:setAttribute 
</text> 

<text y="380" x="20" font-size="12" id="expected">The dsvg:loop element is a 
sequence of instructions that is continually repeated until a certain condition is reached. 

</text> 

<text y="395" x="20" font-size=" 12" id="depend"/> 

<line y2="340" x2="744" yl="340" xl="0" stroke-width="2" stroke=-"#5f86Bl" 
fill="#5£86Bl" id="bottom_line"/> 

<!— adding behavior — > 

<g id="sizer"> 

<rect height="8" width="8" y=" 100" x="25" fill="gray" id="sizerl "/> 
<rect height="8" width="8" y="100" x="35" fill="gray" id="sizer2"/> 
<rect height="8" width="8" y="100" x="45" fill="gray" id="sizer3"> 
<rect height="8" width="8" y-" ICQ" x="55" fill="gray" id="sizer4"/> 
<rect height="8" width="8" y="100" x="65" fill="gray" id="sizer5"/> 
<rect height="8" width="8" y=" 100" x="75" fill="gray" id="sizer6"/> 
<rect height="8" width="8" y="100" x="85" fill="gray" id="sizer7"> 
<rectheight^"8" width="8" y="100" x="95" fill="gray" id="sizer8"/> 
<rect height="8" width="8" y^"100" x="105" fill="gray" id="sizer9"/> 
<rectheight="8" width="8" y="100" x="115" fill="gray" id="sizerlO"/> 
<rectheight="8" width="8" y="100" x="125" fill="gray" id="sizerll"/> 
<rectheight="8" width="8" y="100" x="135" fill="gTay" id="sizerl2"/> 
<rect height="8" width="8" y="100" x="145" fill="gray" id="sizerl3"/> 
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<rectheight="8" width="8" y="100" x="155" fill="gray" id="sizerl4"> 
<rectheight="8" width="8" y="100" x="165" fill="gray" id="sizerl5"/> 
<rectheight="8" width="8" y="100" x="175" fill="gray" id="sizerl6"A> 
<rect height="8" width="8" y="100" x="185" fill="gray" id="sizerl7"> 
<rectheight="8" width="8" y="100" x="195" fill="gray" id="sizerl8"/> 

</g> . 

<dsvg:buttonxlmk:href^"dsvgll/skinButton_Wmdows.svg#skinButton" 
autoScale="trae" disabled="false" selected="false" toggle="false" height="18" 
width=" 100" y="70" x="220" label="Loop Count" id="loopl "> 

<dsvg:loop increment="l" to="18" from="l" id="LOOPl"> 
<dsvg:setAttributevalue="%LOOPl ©value * 10%" 
attribute="height" elementID="sizer%LOOPl@value%"/> 
</dsvg:loop> 

<dsvg:setData value="%LOOP 1 @value%" elementID="iteration" 

id="data"/> 

■^dsvg:butt6ii> 

<texty="70" x="25" fill="#5f86Bl" coloi:="" id="desc"># of times through the 

loop: 

</text> 

<text y="70" x=" 180" font-weight="bold" font-size=" 14" fill="darkblue" 
id="iteration">0 
</tex£> 

</svg> 

The *timer' element 

The 'timer' element allows its child behaviors to be executed iteratively at a 
specified time interval until such time as its 'break' attribute evaluates to true. The 
•iteration' attribute is incremented internally so that it can be referenced by the child 
behaviors for context. 
O.ENTITY % timerExt "" > 
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<!ELEMENT dsvg:timer ANY > 
<! ATTLIST dsvgrtimer 



%stdBehaviorAttrs; 



interval 



%Number; 



#IMPLIED 



break 



%Boolean; 



#IMPLIED 



iteration 



%Integer; 



#IMPLIED > 



Attribute definitions: 
interval = •<number>' 

The time, in milliseconds, between each iteration, 
break = "'(true I falsey 

A value of 'true' causes the timer to stop running. A value of 'false' causes the 

timer to continue ruxming. The defauh is Talse'. It is expected that either the 'break' . 

attribute gets modified extemally via tiie setAttribute behavior, or it is a dS VG 

expression , which gets re-evaluated every iteration, 
iteration = "<number>" 

The value of the current iteration, where the first iteration starts at zero, i.e. the 

number of times the child behaviors have been run. Each iteration, the child 

behaviors can reference this 'iteration' attribute via the dSVG expression syntax. 

This attribute should never be provided by the markup. It is automatically 

populated for reference purposes. 

Figure 7 shows shows a set of rectangles with 2 timers applied-one that starts at 
the first rectangle, setting each consecutive rectangle green, and another starting at the last 
rectangle, settmg each previoxis rectangle blue. The example is provided below: 
<?xml version=" 1 .0" encoding="UTF-8" standalone="no"?> 
<!DOCTYPE svg SYSTEM "../SVGdSVG.dtd"> 
<svg xmlns:dsvg="http://www.corel.com/schemas/2002/dSVG20" 
xmhis:xlink-"http://www.w3.org/1999/xlink" height="410px" width="744px" 
onload="init(evt)" viewBox="0 0 744 41 0"> 
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<script type="text/ecmascript" xlmk:href="dSVG20/dSVG.js"A> 

<script type="text/ecmascript" xlink:href="dSVG20/baseUI.js"/^ 

<script type="text/ecmascript" xlink:hre^"dSVG20/constraint.js"/> 

<script type="text/ecmascript" xlink:href^"dSVG20/buttoii.js"/:> 

<script type="text/ecmascript" xlink:href="dSVG20/setAttribute.js"/> 

<script type="text/ecmascript" xlink:href="dSVG20/timer.js"/> 

<script type^"text/ecmascript" xlink:href="dSVG20/ifos"/i> 

<script type="text/ecmascript" xlink:href="dSVG20/alert.js"/> 

<Script type="text/ecmascript" xlink:href="dSVG20/setData.js"/> 

<script type="text/ecmascript" xlink:href="dSVG20/loadXND:..js"/> 

<script type="text/ecmascript" xlink:href="dSVG20/slider.js"/^ 

<script type="text/ecmascript" xliiik:href="dSVG20/removeElement.js"/> 

<scripttype="text/ecmascript" xlink:href^"dSVG20/zoom.js'7><!- template ~> 

<defs/> 

<g id="template"> 

<rect height="40" width="744" y="0" x="0" fill="#5f86B 1 " 

id="title_rect"/> 

<text y="25" x="20" font-weight="bold" font-size=" 1 8" fill="white" 
id="text_l">dSVG sample behavior: timer 

</text> 

<text y="365" x="20" font-size="12" id="content">Selecting the button in 
the top portion will set the cx attribute for the circle. 
</text> 

<text y="3 80" x="20" font-size=" 12" id="expected">The bottom set of 
rects has 2 timer applied. 

</text> 

<text y="395" x="20" font-size-' 12" id="depend">l moving forward to 
set each consecutive rect green. 1 starting at the last rect moving backwards turning each 
rectblue. 

<text> 
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<line y2="340" x2="744" yl="340" xl="0" stroke-width="2" 
stroke="#5f86Bl" fill="#5f86Bl" id="bottomJine"/> 

<line y2="180" x2="744" yl="180" xl="0" stroke-width="2" 
s1roke="#5f86Bl" fill="#5f86Br' id="mid_line"/> 

</g> 

<g id="basicGroup"> 

<circler="10" cy="120" cx="60" id="circlel"> 

<text y="70" x="227" visibility="hidden" id="text_distance">200 

</text> 

<dsvg:button xlink:hief^"dSVG20/skinButton_Windows.syg#skinButton" 
autoScale="trae" height=" 1 8" width=" 1 00" y="80" x="50" label="basic" 
id="button_basic"> 

<dsvg: variable value="%circlel@cx + 2.5%" name="var_basic" 

id="var_basic"> 

<dsvg:setAttribute value="#5f86Bl" attribute="fUl" 

elemenflD="circlel" id="dsvgUniqueID_l"/> 

<dsvg:timerbreak="%timer_basic@iteration> 50%" mterval="20" 

eveiit="onclick" id="timer_basic"> 

<dsvg:setAttribute value="%$var_basic%" attribute="cx" 
elementID="circle 1 " id="dsvgUniqueID_3 "/> 

<dsvg:if value2="a" op="equal" valuel="a" 

id="dsvgUniqueID_5"> 

<dsvg:setAttribute value="visible" 
attribute="visibility" elementID="text_distance" id="dsvgUniqueID_7"/> 

<dsvg:setData value="The cx position of the circle 
is: %circlel@cx%" elementID="text_distance" id="dsvgUniqueID_8"/i> 

</dsvg:i£> 
</dsvg:tiiner> 
<ydsvg:button> 

</g> 
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<g id="rectTimers"> 

<g id- 'crossingTimers"> 

<dsvg:timer break='Totimer3@iteration > 4999%" interval=''357" 

event="onload" id="timer3"> 

<dsvg:variable 

value="%substring(timer3@iterationJength(timer3@iteration)Xlength(timer3@ite^^ 

1))%" naine="valTwo" id="v4"/> 

<dsvg:setAttribute valu^"GTeen" attribute="fiH" 

elementID="myRect%$valTwo%"/> 

<dsvg:setAttribute value="0.4" attribute="opacity" 

elementID="myRect%$valTwo%"/> 

<dsvg:setAttribute value="blue" attribute="fiU" 

elementID="myRect%10 - $valTwo%"/> 

<dsvg:setAttribute value=" .4" attribute="opacity" 

elementID="myRect%10 - $valTwo%"/> 

</dsvg:timer> 

</g> 

<g id="rectGroup"> 

<rect height="30" width="30" y="200" x="50" fill="black" 

id="myRectl"/> 

<rectheight="30" width="30" y="200" x="90" fill="black" 

id="myRect2"/> 

<rectheight="30" width="30" y="200" x="130" fill="black" 

id="myRecG"/i> 

<rect height="30" width="30" y="240" x="50" fill="black" 

id="myRect4"/> 

<rect height="3.0" width="30" y="240" x="90" fiU="black" 

id="myRect5"/> 

<rect height="30" width="30" y="240" x=" 130" fm="black" 

id="myRect6"> 
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<rectheight="30" width="30" y="280" x="50" mi="black" 

id="myRect7"/> 

<rectheight="30" width="30" y="28Q" x="90" fill=!'black" 

id="myRect8"/> 

5 <rect height="30" width="30" y="280" x=" 1 30" fill="black" 

id="myRect9"/> 

<lg> 

</g> 

<g id="insertGTOup"/i> 

10 </svg> 

Coordinate Mapping Elements 23 

Often a web application requires the ability to click and drag objects, perhaps for 
the purposes of editing their positions. SVG does not currently have this capability. 
1 5 Thus, script is required which tracks the mouse movements and creates a translation 
transform on the object. Also, a user may desire to display coordinate information for 
where the mouse curser is located. Thus, the user first needs to know where the mouse 
cursor is in the coordinate system of the SVG document, before the user can convert the 
coordinate information to the coordinate system the user is using. CurrenUy, only script 

20 can assist a user. 

In order to display coordinate-based data, such as the location of cities on a 
background map, a user must convert those coordinates to the coordinate system of the 
SVG document. An example of such a conversion is a linear transformation (a scale and 
translation), such as a cartesian grid with parallel latitude and longitude lines. Another 
25 example of a transformation is a polynomial transformation, such as for a map with a 
latitudeAongitude projection (i.e., curved lines of latitude, angled lines of longitude). 
Usually, calculations are required to determine transformations. SVG does not provide 
markup for creating and applying complex mathematical transformations. 

Sometimes data visualized in a web application uses a projection system, such as a 
30 latitude/longitude or universal transverse mercator(UTM), which usually requires 
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knowledge of how flie projection system operates. To be able to map to the coordinate 
system of an SVG docxmient usually requires knowledge of how to convert between such 
projections. SVG does not provide markup to specify a projection system and 
parameters, and automatically map any coordinate from one system to the other. 

A coordinate mapping element 23 manipulates the coordinates of an object in the 
web application. Coordinate mapping elements 23 are used to display an object whose 
coordinates are in a system different from the DOM coordinate system. A coordinate 
mapping element 23 is inserted in a DOM as a child of another DOM elements. 

The attributes of a coordinate mapping element 23 include point pair coordinates. 
The associate instruction 33 performs actions used to take third party XML data and 
position the data in a DOM. Coordinate mapping elements 23 include the 
'mousePosition' element, the 'mapCoords' element, the 'pointPair' element, and the 
'mapProj' element. 

The 'mousePosition' element 

The 'mousePosition' element defines a container for holding the current mouse 
coordinates, relative to the document or to the target element. It is a persistent object in 
memory that should be instantiated once, and so should not be a chUd of any element 
other than the 'svg' root element (or a 'g' element). 
<!ENTITY % mousePositionExt "" > 
<!ELEMENT dsvg:mousePosition EMPTY > 
<!ATTLIST dsvgimousePosition 
%stdBehaviorAttrs; 

elementID ID #IMPLIED 
X %Coordinate; #IMPLIED 

y %Coordinate; #IMPLIED 

type %Type "relative" > 

Attribute definitions: 
elementID = "name" 
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The 'id' attribute of the target element to generate the mouse events. 
X = "<coordinate>" 

The current x-coordinate of the mouse cursor. Settmg this attribute has no 
effect— it is purely a storage attribute, intended to be referenced, 
y = "<coordinate>" 

The current y-coordinate of the mouse cursor. Setting this attribute has no effect-it 
is purely a storage attribute, intended to be referenced, 
type = "(relative | absolute)" 

Specifies whether the mouse coordmates are to be relative to the document 
(absolute) or relative to the target element (relative). 

Figure 8 shows a rectangle 115 with mouse coordinates displayed relative to both 
the document and the rectangle. The mousePosition element defines a container for 
holding the current mouse coordinates. The coordinates can be tracked relative to the 
1 5 document or absolute to the parent element. The example is provided below: 
<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg SYSTEM "../SVGdSVG.dtd"> 
<svg xmlns:dsvg;="http://www.corel.c6m/schemas/2002/dSVGl 1" 
xmlns:xlink="http://www. w3.org/1999/xlink" height="410px" width="744px" 
20 onload="init(evt)" viewBox="0 0 744 410"> 

<script type="text/ecmascript" xlink:href="dsvgl l/dSVG.js"/> 
<script type="text/ecmascript" xlink:href="dsvgl l/baseUI.js"/> 
<script type="text/ecmascript" xlink:href="dsvgl l/constraint.js"/> 
<script type="text/ecmascript" xlink:href="dsvgl l/mousePosition.js"/i> 
25 <script type="text/ecmascript" xlink:href="dsvgl l/setData.js"/> 

<!— template —> 

<rectheight="40" width="744" y="0" x="0" fill="#5f86Bl" id="title_rect"/> 
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<texty="25" x="20" font-weight="bold" font-si2e="18" fm="wliite" 
id="text_l">dSVG sample behavior: monsePosition 
</text> 

<text y="365" x="20"' font-size=" 12" id="content">Content of file: 
5 dsvg:mousePosition, dsvg:setData 
</text> 

<text y="380" x="20" font-size=" 12" id="expected">The dsvg:mousePosition 
element defines a container for holding the current mouse coordinates. 
</text> 

10 <text y="395" x="20" font-size=" 12" id="depend">The coordinates can be 

tracked relative to the document or absolute to the parent element. 

</text> 

<line y2="340" x2="744" yl="340" xl="0" stroke-width="2" stroke="#5f86Bl" 
fill="#5f86Bl" id="bottom_line"A> 

<!— adding behavior — > 

<text y="60" x="50" id="targetText">Target Rectangle 
</text> 

<rectheight="200" width="200" y="70" x="50" stroke- width=" 3" stroke="black" 

fill="#5f86Bl" id="rectl"> 

<dsvg:setpata value="%mouse_Relative@x%" 
elementID="relative_xpos" event="onmousemove" id="set_relativeX"/> 

<dsvg:setData value="%mouse_Relative@y%" 
elementID="relative_ypos" event="onmousemove" id="set_relativeY"/> 

<dsvg:setDatavalue="%mouse_Absolute@x%" 
elementID="absolute_xpos" event="onmousemove" id="set_absoluteX"> 

<dsvg:setDatavalue="%mouse_Absolute@y%" 
elementlD="absolute_ypos"event="onmousemove"id="dsvgUniqueID_5"/i> 

</rect> 



20 



25 



30 
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<dsvg:mousePositiontype="relative" elementID="rectl" event="onmousemove" 

id="mouse_Relative"/> 

<dsvg:mousePosition typ.e="absolute" elementID="rectl" event=".omnousemove" 

id="mouse_Absolute"/> 
5 <text y="290" x="40" id="textx_relative">Relative Position 

</text> 

<text y="3 10" x="40" id="relative_xlabel">X= 
</text> 

<texty="330" x="40" id="relative_ylaber>Y= 

10 </tss£> 

<texty="310" x="60" font-size="8" fill="green" id="relative_xpos">x Position 

</text> 

<texty="330" x="60" font-size="8" fill="green" id="relative_ypos">y Position 
</text> 

1 5 <text y="290" x=" 1 90" id="textx_absolute"> Absolute Position 

</text> 

<texty="310" x="190" id="absolute_xlaber>X= 
</text> 

<text y="330" x="190" id="absolute_ylaber'>Y= 

20 </text> 

<texty="310" x="210" font-size="8" ffll="green" id="absolute_xpos">x Position 

</text> 

<text y="330" x="210" font-size="8" fill="green" id="absolute_ypos">y Position 
</text> 

25 </svg> 

The *mapCoords' element 

The -mapCoords' element defines an object used for mapping coordinates in one 
space to another space, via a polynomial transformation, whose coefficients are 
30 determined by the coordinates of the point-pairs given in the chUd 'pointPair' elements. 
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<!ENnTY % mapCoordsExt "" > 

<!ELEMENT dsvg:mapCoords (dsvgrpointPair)* > 

<!ATTLIST dsvgrmapCoords 

%stdBehaviorAttrs; 
5 order %Integer; #IMPLIED 

inputID ID #IMPLIED 

X %Coordinate; #IMPLIED 

y . %Coordinate; #IMPLIED 

u %Cooidinate; #IMPLIED 

10 V %Coordinate; #IMPLIED 

apply %Boolean "false" > 

Attribute definitions: 
order = "<integer>" 

15 The order of the polynomial transformation. The defaidt is 1, which only requires 

2 point-pairs, resulting in an affine (linear) transformation. 
inputID = "name" 

The 'id' attribute of the element that will automatically feed its coordinates into the 
•mapCoords' element's 'x' and 'y' attributes whenever they update, e.g. the ID of a 
20. 'mousePosition' element. 

X = "<coordinate>" 

The x-coordinate of the first coordinate system. Updating this attribute 

automatically updates the 'u' attribute, 
y = "<coordinate>" 

25 The y-coordinate of the first coordinate system. Updating this attribute 

automatically updates the 'v* attribute. 

u = "<coordinate>" 

The x-coordinate of the second coordinate system. Updating this attribute 

automatically updates the 'x' attribute. 

30 V = "<coordinate>" 
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The y-coordinate of the second coordinate system. Updating this attribute 
automatically updates the 'y' attribute, 
apply = "(true I false)" 

Specifies whether the coordinates of the element defined by 'inputID' will be 
5 actually modified according to the polynomial transformation defined by the 

point-pairs (true) or not (false). 

Figure 9 shows two ellipses 120 aiid 125 transformed to another coordinate space. 
The mapCobrds element defines an object used for mapping from one coordinate space to 
1 0 another. The resulting coefficients are determined by the coordinates of the point-pairs 
(child) elements. The example is provided below: 
<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg SYSTEM "../SVGdSVG.dtd"> 
<svg xmlns:dsvg="http://www.corel.com/schemas/2002/dSVGH" 
1 5 xmhis:xlink="http://www. w3.org/1999/xlink" height="410px" width="744px" 
onload="init(evt)" viewBox="0 0 744 410"> 

<script type="text/ecmascript" xlink:href="dsvgl l/dSVG.js"/> 
<script type="text/ecmascript" xlink:href="dsvgl l/baseUI.js'?/> 
<script type="text/ecmascript" xlink:href="dsvgl l/constraintjs"/> 
20 <scripttype="text/ecmascript"xlink:href="dsvgll/mapCoords.js"/> 
<script type="text/ecmascript" xlink:href="dsvgl l/setAttribute.js"/> 

<!-- template ~> 

<rect height="46" width="744" y="0" x="0" fill="#5f86B I " id="title_rect"/> 
<texty="25" x="20" font-weight="bold" font-size="18" fill="white" 
id="text_r'>dSVG sample behavior: mapCoords 
</text> 

<text y="365" x="20" font-size=" 12" id="content">Content of file: 
dsvg:mapCoords, dsvg:pouitPair, dsvg:setAttribute 
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</text> 

<text y="380" x="20•^font-size="12" id-"expected">The dsvg:mapCoords 
element defines an object used for mapping from one coordinate space to another. 

</text> 

5 <text y="395" x="20" font-size=" 12" id="depend">The resulting coefficients are 

determined by the coordinates of the point-pairs (child) elements. 
</text> 

<line y2="340" x2="744" yl="340" xl="0" stroke-width="2" stroke="#5f86Bl" 
fill="#5f86Bl" id="bottom_line"/> 

10 

<!-- adding behavior ~> 

<g id="fragment"> 

<elUpse ry="50" rx="100" cy="l 15" cx="175" fill="orange" 

15 id="fragellipsel"/^ 

<ellipse ry="25" rx="50" cy=" 1 1 5" cx=" 175" fill="blue" 

id="fragellipse2"/i> 

</g> . . 

<rect height=" 1 00" width="200". y="65" x="75" stroke-width=" 1 " stroke="red" 

20 fill="none"/> 

<texty="185" x="75" font-size="10" fill="red">Incorrect Location 

</text> 

<rectheight="100" width="200" y="165" x="175" stroke-width="l" 
stroke="green" fill="none"/> 
25 <text y="285" x="175" font-size="10" fill="green">correct Location 

</text> 

<dsvg:mapCoords apply="true" inputID="fragment" id="m^oordsl"> 
<dsvg:pointPair v="100" u="100" y="0" x="0"/> 
<dsvg:pointPair v="110" u="110" y="10" x="10"/> 

30 </dsvg:mapCoords> 
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<dsvg:setAttribute value="true" attribute="convertNow" 
elementID="niapcoordsl" id="dsvgUniqueID_3"A> 
</svg> 



5 The 'pointPair' element 

The 'pointPair' element, which must be a child of the 'mapCoords' element, defines 
the x-y coordinates for the same location in two different coordinate spaces. The 
point-pau-s are used to calculate the polynomial transformation coefficients. 
<!ENTITY % pointPairExt > 
10 <!ELEMENTdsvg:pointPair EMPTY > 
<!ATTLIST dsvg:pointPair 
%stdBehaviorAttrs; 
X %Coordinate; #IMPLIED 
y %Coordinate; #IMPLIED 
15 u %Coordmate; #IMPLIED 

V %Coordinate; #IMPLIED > 

Attribute definitions: 
20 X = "<coordinate>" 

The x-coordinate of the first coordinate system, 
y = "<coordinate>" 

The y-coordinate of the first coordinate system, 
u = "<coordinate>" 
25 The x-coordinate of the second coordinate system. 

V = "<coordinate>" 

The y-coordinate of the second coordinate system. 

The 'mapProj' element 
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The 'mapPioj' element defines an object used for mapping coordinates in one 
space to another space, via a polynomial transformation, whose coefficients are 
determined by the coordinates of the point-pairs given in the child 'pointPair' elements. 
O.ENTITY % mapProjExt "" > 
5 O.ELEMENT dsvg:mapProj EMPTY > 
<!ATTLIST dsvg-.mapProj 
%stdBehaviorAttrs; 

inputID ID #IMPLIED 

inputProj %Projection "UTM" 
10 outputProj %Projection "LatLong" 

ellipsoid %Ellipsoid "WGS84" 

zone %Text #IMPLIED 

X %Coordinate; #IMPLIED 

y %Coordinate; #IMPLIED 

15 u %Coordinate; #IMPLIED 

V %Coordinate; #IMPLIED > 

Attribute definitions: 
inputID = "name" 

20 The 'id* attribute of the element that will automatically feed its coordinates into the 

•mapProj' element's 'x' and 'y' attributes whenever they update, e.g. the ID of a 
'mapCoords' element. 
inputProj = "GJTM I LatLong)" 
The input project system. 
25 If this attribute is not provided, the defavdt is "UTM" . 

outputProj = "(UTM 1 LatLong)" 
The output project system. 

If this attribute is not provided, the default is "LatLong". 
ellipsoid = "(Airy 1 AustralianNational | Bessell841 | Bessell841Nambia | Clarkel866 1 
30 Clarkel880 | Everest | Fischer 1960Mercury | Fischerl968 | GRS1967 1 GRS1980 | 
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Helmertl906 | Hough | International | Krassovsky | ModifiedAiry | ModifiedEverest | 
.ModifiedFischerl960 1 SouthAmericanl969 1 WGS60 | WGS66 | WGS72 | WGS84)" 

The ellipsoid of the UTM projection system. 

If this attribute is not provided, the default is "WGS84". 

5 zone = '<string>' 

The zone of the UTM projection system. 

X = "<coordinate>" 

The x-coordinate of the first projection system. Updating this attribute 
automatically updates the 'u' attribute. 
10 y = "<coordiriate>" 

The y-coordinate of the first projection system. Updating this attribute 
automatically updates the V attribute, 
u = "<coordinate>" 

The x-coordinate of the second projection system. Updating this attribute 
15 automatically updates the 'x' attribute. 

V = "<coordinate>" 

The y-coordinate of the second projection system. Updating this attribute 
automatically updates the 'y' attribute. 

20 Figure 10 shows two ellipses transformed to another coordinate space. The 

mapProj element defines an object used for mapping coordmates firom one project system 
to anotiier. For example, "latlong" can be mapped to "UTM". The example is provided 
below: 

<?xml version="1.0" standalone="no"?> 
25 <!DOCTYPE svg SYSTEM "../SVGdSVG.dtd"> 

<svg xmhis:dsvg="http://www.corel.com/schemas/2002/dSVGir' 

xmhis:xlink="http://www.w3.org/1999/xlmk" height="410px" widtii="744px" 

onload="init(evt)" viewBox="0 0 744 410"> 

<script type="text/ecmascript" xlink:href="dsvgl l/dSVG.js"/> 
30 <scripttype="text/ecmascript"xlink:href^"dsvgll/baseUI.js"/> 
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<script type="text/ecmascript" xlink:href="dsvgl l/constraint.js"> 
<script type="text/ecmascript" xliiik:href="dsvgll/mousePosition.js"/> 
<script type="text/ecmascript" xliiik:href="dsvgl l/mapCoords.js"/> 
<script type="text/ecmascript" xlink:href="dsvgl l/setData.js"/> 
<script type="text/ecmascript" xlmk:href="dsvgl l/mapProj.js"/> 

<!— template —> 

<rect height="40" width="744" y="0" x="0" fill="#5f86B 1 " id="title_rect"/> 
<texty="25" x="20" font-weight="bold" font-size="18" fiU=" white" 
id="text_l">dSVG sample behavior: mapProj 
</text> 

<texty="365" x="20" font-size="12" id="content">Content of file: dsvg:mapProj, 
dsvg:mapCoords, dsvg:pointPair, dsvg:setData, dsvg:movisePosition 
</text> 

<text y="380" x="20" font-size="12" id="expected">The dsvg:mapProj element 
defines an object used for mapping coordinates from one project system to another. 
</text> 

<texty="395" x="20" font-size="12" id=."depend">For example, "latlong" can be 
mapped to "UTM". 
</text> 

<line y2="340" x2="744" y 1="340" xl="0" stroke-width="2" stroke="#5f86B 1 " 
fill="#5f86Bl" id="bottom_line"> 

<!— adding behavior — > 

<text y="65" x=" 1 0" font-weight="bold" id="targetText">Target Image 
</text> 

<image height="371" width="325" y="0" x="50" transform=" translate(50 50) 
scale(0.75)" xlink:href=" 3 14_canutillo.jpg" id="canutiUo"> 
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<dsvg:setData valxie="%mousePosition@x%, %mousePosition@y%" 
elementlD-'textMousePosition" event="onmousemove"/> 

<dsvg:setData value="%pixelsToUTM@u%, %pixelsToUTM@v%" 
elementID="textUTM" event="onmousemove"/> 

<dsvg:setDatavalue="%UTMToLatLong@latitude% 
%UTMToLatLong@longitude%" elementID="textLL" event="onmousemove"/> 
</image> 

<dsvg:mousePosition type=?"relative" elementID="canutiUo" 
event="onmovisemove" id="mousePosition"/> 

<dsvg:mapCoords inputID="mousePosition" id="pixelsToUTM"> 
<dsvg:pointPair v="3534270" u="346020" y="0" x="0"/> 
<dsvg:pointPair v="3541920" u="352710" y="371" x="325"/i> 
</dsvg:mapCoords> 

<dsvg:mapProj zone="13" ellipsoid="WGS84" outputProj-"LatLong" 
inputProj="UTM" inputID="pixelsToUTM" id="UTMToLatLong"/> 

<texty="285"x="360" 
style="font-weight:normal;font-size: 1 1 ;font-family :Tahoma;fill:#000000">x,y: 

</text> 

<text y="305" x="360" 
style="font-weight:normal;font-size: 1 1 ;font-family:Tahoma;fill:#000000">UTM: 

</text> 

<texty="325"x="360" 
style="font-weight:normal;font-size: 1 1 ;font-family :Tahoma;fill:#000000">Lat/Long: 

</text> 

<texty="285"x="420" 
style="font-weight:normal;font-size: 1 1 ;font-family :Tahoma;fill:#000000;" 
id="textMousePosition"> 

</text> 
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<texty="305"x="420" 
style="font-weight:normal;font-size: 1 1 ;font-family :Tahoma;fill:#000000;" 
id="textUTM"> 

</text> 

<text y="325" x="420" 
style="font-weight:nonnal;font-size: 1 1 ;font-family :Tahoma;fill:#000000;" id="textLL"> 
</text> 

</svg> 

Viewer Behavior Elements 24 

SVG viewers allow a user to zoom in and out, and to pan, using a built-in UI, or 
by accessing the SVG DOM via script. There currently does not exists an SVG DOM 
API for playing a sound. One way to play a sound currently is via an Adobe (TM) 
extension in the Adobe SVG Viewer. 

A viewer behavior element 24 is used to manipulate viewer behavior with respect 
to the web application. An example of a viewer is an SVG pluggin for a web browser. In 
particular, the viewer behavior elements 24 assist a designer to zoom and pan the current 
document or a docimient fragment. 

The attributes of a viewer behavior element 24 include an event attribute that 
triggers the viewer behavior element. The associated instruction 34 performs actions used 
to zoom and pan a document in a web application. Other actions may be performed by 
the associated implementation code 34. 

Some behavior elements have attributes that provide the ID of other elements. For 
instance, <dsvg:setAttribute> uses an 'elementlD* attribute to specify Ihe target element 
whose attribute is to be modified. In such cases, the miethod of targeting other elements 
could be more robust. One example would be to have additional attributes ttiat allow for 
the targeting of different frames, objects and documents in an HTML page, which would 
allow for behaviors in multiple SVG documents embedded in a single HTML document 
to interact with each other. Another example would be to use XPath expressions 
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(http://www.w3.org/TR/xpath) rather than ID'S to target elements. Using XPaths could 
also enable some behaviors to act upon multiple targets. 

Viewer behavior elements 24 include the 'alert' element, the 'function' element, 
the 'loadURL' element, the 'pan' element, the 'postURL' element, the 'zoom' element, 
and the 'playSound' element. Examples of the viewer behavior elements 24 are provided 
below. The examples provide a syntax, a description and attributes of the viewer 
behavior elements 24. Other viewer behavior element 24 may be created. The provided 
viewer behavior elements 24 are examples of one implementation. The common 
attributes and viewer behavior elements 24 are presented as fragments of a sample 
document type definition (DTD). 

Common Attributes 
<!ENTITY % stdBehaviorAttrs" 



id 


ID 


#IMPLIED 


event 


%Text 


#IMPLIED 


eventKeyCode 


%Text 


#IMPLIED 


eventKeylD 


%Text 


#IMPLIED 


eventCharCode 


%Text 


#IMPLIED 


eventChar 


%Text 


#IMPLIED > 



id = "name" 

Standard XML attribute for assigning a unique name to an element, 
event = •<string>' 

The name of the event that causes the behavior to be executed. This attribute can 
be set fo either the event name or the event attribute name. The allowed values are: 
click, onclick, mousedown, onmousedown, mouseup, onmouseup, mouseover, 
onmouseover, mousemove, onmousemove, mouseout, onmouseout, SVGLoad, 
onload, SVGUnload, onunload, SVGResize, onresize, SVGScroU, onscroU, 
SVGZoom, onzoom, keydown, onkeydown, keypress, onkeypress, keyup and 
onkeyup. As weU, it can be equal to 'caUback, which is a dSVG semantic-level 
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"virtual" event, triggered whenever one interacts with a UI control in such a 
manner as to caxise its associated behaviours to be run. e.g. when a button is 
clicked on or when an item in a listBox is selected. 

eventKeyCode = '<string>' 

The value of the 'keyCode' event attribute (automatically generated in response to 
'keydown' and 'keyup' events) that causes the behavior to be executed. This 
attribute is only used if the 'event' attribute is set to 'keydown' or 'keyup' (or 
'onkeydown' or 'onkeyup') and the actual event is equal to 'keydown' or 'keyup'. 
eventKeylD = ♦<string>' 

The key identifier for the 'keyCode* event attribute (automatically generated in 
response to 'keydown' and 'keyup' events) that causes the behavior to be executed. 
The keylD is a string representation of the 'keyCode' attribute of the 'keydown' or 
•keyup' event that triggered the behavior, e.g. 'Space', 'Enter', 'A', etc. The keylD's 
resemble, as closely as possible, the key identifiers listed in the W3C Working 
Draft of the DOM Level 3 Events Specification. This attribute is only used if the 
•event' attribute is set to 'keydown' or 'keyup' (or 'onkeydown' or 'onkeyup') and 
the acttial event is equal ft) 'keydown' or 'keyup'. If the 'eventKeyCode' attribute is 
provided, this attribute is ignored. 
eventCharCode = '<string>' 

The value of the 'charCode' event attribute (automatically generated in response to 
the 'keypress' events) that causes the behavior to be executed. This attribute is only 
used if the 'event' attribute is set to 'keypress' (or 'onkeypress') and the acttxal event 
is equal to 'keypress'. 
eventChar = '<string>' 

The string representation of the 'charCode' event attribute (automatically generated 
in response to the 'keypress' events) that causes the behavior to be executed, e.g. 'a' 
or 'A'. This attribute is only used if the 'event' attribute is set to "keypress' (or 
'onkeypress') and the actual event is equal to 'keypress'. If the 'eventCharCode' 
attribute is provided, this attribute is ignored. 
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The 'alert* element 

The 'alert' element displays a message in a popup window. 
<!ENTITY % alerfExt "" > 
<!ELEMENT dsvg:alert EMPTY > 
5 <!ATTLIST dsvg:alert 
%stdBehaviorAttrs; 

message %Text; #IMPLIED > 

Attribute definitions: 
10 message = '<string>' 

The text to be displayed in the popup window. 

Figure 1 1 shows a push button 140 with an associated 'alert' behavior. The alert 
element is implemented as a dialog box 141 used to display a custom message. The 
15 example is provided below: 

<:?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg SYSTEM "../SVGdSVG.dtd"> 
<svgxmlns:dsvg="http://www,corel.com/schemas/2002/dSVGH" 
xmhis:xlink="http://www.w3.org/1999/xlink" height="410px" width="744px" 
20 onload="init(evt)" viewBox="0 0 744 410"> 

<script type="text/ecmascript" xlink:href="dsvgll/dSVG.js"/> 
<script type="text/ecmascript" xlink:href="dsvgl l/baseUl.js"/> 
<script type="text/ecmascript" xlink:hre^"dsvgl l/constraint.js"/> 
<script type="text/ecmascript" xlink:href="dsvgl l/alert.js"/> 
25 <script type="text/ecmascript" xlink:href="dsvgl l/button.js"/> 

<!-- template —> 

<rectheight="40" width="744" y="0" x="0" fill="#5f86Bl" id="title_rect"/> 
<text y="25" x="20" font-weight="bold" font-size=" 1 8" fill="white" 
30 id="text_l ">dSVG sample behavior: alert</text> 
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<line y2="350" x2="744" yl="350" xl="0" stroke-width="2" stroke="#5£86Bl" 
fill="#5f86Bl" id="bottom_line"/> 

<text y="365" x="20" font-size=" 12" id="content">Content of file: dsvgibutton, 

dsvg:alert</text> 

<text y="380" x="20" font-size="12" id="expected">The dsvg:alert element is a 
dialog box used to display a ciistom message.</text> 

<!— adding behavior —> 

<dsvg:buttonxlink:href="dsvg/skinButton_Windows.svg#skinButton" 

selected="false" disabled="false" toggle="false" y="70" x="50" label="Fire alert" 

id="dsvgUmqueID_0"> 

<dsvg:alert message=" Alert message" id="dsvgUniqueID_2"> 

</dsvg:button> 

</svg> 

The 'function' element 

The 'function' element is used to call an existing script function. 

<!ENTITY % functionExt "" > 
<!ELEMENT dsvg:function EMPTY > 

<! ATTLIST dsvg:function - 
name - %Text; #IMPLIED 
parameters %Text; #IMPLIED> 

Attribute definitions: 
name = '<string>' 

The name of the script function to call, not including brackets. 

parameters = '<string>' 

The parameters, separated by commas, to be passed into tiie script fimction. 
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The function element example provided below shows a push button that invokes 
the 'function' behavior, which calls a script function. 
<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg SYSTEM "../SVGdSVG.dtd"> 
5 <svgxmhis:dsvg="http://www.corel.com/schemas/2002/dSVGH" 

xmhis:xlink="http://www.w3.org/1999/xlink" height="410px" width="744px" 

onload="imt(evt)" viewBox="0 0 744 410"> 

<script type="text/ecmascript" xlink:href="dsvgl l/dSVG.js"/> 

<script type="text/ecmascript'' xlink:href="dsvgl l/baseUI.js"/> 
<script type="text/ecmascript" xlink:href="dsvgl l/constraint.js"/> 
<script type="text/ecmascript" xlink:href="dsvgll/button.js"> 
<script type="text/ecmascript'' xlink:href="dsvgl l/functioh.js"/> 

<!— template --> 

<rect height="40" width="744" y="0" x="0" fm="#5f86Bl" id="title_rect"/> 
<texty=^"25" x="20" font-weight="bold" font-size="18" fUl="white" id= 
"text_l">dSVG sample behavior: 
function</text> 

<text y="365" x="20" font-si2e=" 12" id= "content">Content of file: 

dsvg:function, 

dsvg:button</text> 

<texty="380" x="20" font-size="12" id= "expected">The dsvg:function element 
is a named procedure that performs a distinct set of 
parameters.</text> 

<line y2="340" x2="744" yl="340" xl="0" stroke-width="2" stroke="#5f86Bl" 
fill="#5f86Bl" id="bottom_line"> 

<!-- adding behavior ~> 



15 



20 



25 
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<dsvg:buttonxliiik:href=''dsvg/sldnButton_Windows.svg#skinButton" 
autoScale="true" disabled="false" selected="false" toggle="false" height="18" 
width="100" y="70" x="50" label="Call function" id="dsvgUniqueID_0"> 

<dsvg:function parameters=" sample of dsvg:function" name="alert" 
5 id="dsvgUmqueID_l"/> 
</dsvg:buttoi:P' 

</svg> 

The 'loadURL* element 

1 0 The 'loadURL' element loads an SVG document and uses it to completely replace 

the existing SVG document. 
<!ENTITY % loadURLExt "" > 
<!ELEMENT dsvg:loadURL (%behaviors;) > 
<!ATTLIST dsvg:loadURL 
15 %stdBehaviorAttrs; 

xmlns:xlink CDATA #FIXED 'http://www.w3.org/1999/xlink' 

xlinkthref %URI; ' #IMPLIED> 

Attribute definitions: 
20 xlink:href = "<uri>" 

A reference to the URI that the data will be loaded from. 
If the attribute is not specified, nothmg will be loaded. 

The loadURL element example provided below shows a push button with the 
25 associated 'loadURL' behavior. 

<?xml version-' 1.0" standalone="no"?> 

<!DOCTYPE svg SYSTEM "../SVGdSVG.dtd"> 

<svg xinlns:dsvg="http://www.corel.com/schemas/2002/dSVGir' 

xmhis:xlink="http://www.w3.org/1999/xlink"height="410px"width="744px" 

30 onload="init(evt)" viewBox="0 0 744 410"> 
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<script type="text/ecmascript" xliiik:href="dsvgl l/dSVG.js"A> 
<script type="text/ecmascript" xlink:href="dsvgll/baseUI.js"/> 
<script type="text/ecmascript" xlink:href="dsvgl l/constraint.js"/> 
<script type="text/ecmascript" xliiik:href^"dsvgl l/button.js"/> 
<script type="text/ecmascript" xlink:href="dsvgl l/loadURL.js"/> 

<!— template — > 

<rect heigh1="40" width="744" y="0" x="0" fm="#5f86Bl" id="title_rect"> 
<texty="25" x="20" font-weight="bold" font-size="18" fill="white" id= 
"text_r'>dSVG sample behavior: 
loadURL</text> 

<text y="365" x="20" font-size=" 12" id= "content">Content of file: 

dsvg:loadURL, 

dsvg:button</text> 

y="380" x="20" foiit-size="12" id="expected">The dsvg:loadURL element 

loads an SVG file.</text> 

<texty="395" x="20" font-size="12" id="depend"> 

<line y2="340" x2="744" yl="340" xl="0" stroke-width="2" stroke="#5f86Bl" 
fill="#5f86Bl" id="bottom_line"/> 

<!-- adding behavior —> 

<dsvg:button xlink:hre^"dsvg/skinButton_Windows.svg#skinButton" 
autoScale="true" disabled="false" selected="felse" toggle="false" height="18" 
width="100" y="70" x="50" label="loadURL" id="dsvgUniqueID_0"> 

<dsvg:loadURL xlink:href="310.svg" id="dsvgUniqueID_l"/> 

</dsvg:button> 

</svg> 
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The 'pan* element 

The 'pan' element scrolls the document by the specified amount. Intemally, this 
sets the SVG DOM's currentTranslate.x and currentTranslate.y variables, which should 
trigger a 'scroll' event. 
5 <!ENTITY % panExt "" > 

<!ELEMENT dsvg:pan EMPTY > 
<! ATTLIST dsvg:pan 
%stdBehaviorAttrs; 

X %Integer; #IMPLIED 
10 y %Integer; #IMPLffiD 
type %Type; 'relative' > 

Attribute definitions: 

X = "<integer>" 
15 The amount to scroll in the x-direction.. 

y = "<integer>" 

The amoxmt to scroll in tiie y-direction.. 
type = "(absolute | relative)" 

Specifies whether to set the document's current translation to the specified 'x' and 
20 y amounts (absolute) or to modify the document's current translation by the 

specified 'x' and 'y' amounts (relative). 

If this attribute is not provided, the default is "relative". 

The pan element example provided below shows 4 buttons that invoke the 'pan' 

25 behavior to scroll flie document in all 4 directions. 
<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg SYSTEM "../SVGdSVG.dtd"> 
<svg xmlns:dsvg="http://www.corel.com/schemas/2002/dSVGl 1 " 
xmhis:xlink="http://www.w3.org/1999/xlink" height="410px" width="744px" 

30 onload="init(evt)" viewBox="0 0 744 410"> 



-47- 



<script type="text/ecmascript" xlink:href="dsvgl l/dSVG.js"> 
<script type="text/ecmascript" xliiik:href="(isvgl l/baseUI.js"/> 
<script type="text/ecmascript" xlink:href="dsvgll/constraint.js"/> 
<script type=''text/ecmascript" xlink:href=''dsvgl l/button.js"/> 
<script type="text/ecmascript" xliiik:href="dsvgl l/pan.js"/> 

<!— template — > 

<rect height="40" width="744" y="0" x="0" ffll="#5f86Bl" id="title_rect"/> 
<text y="25" x="20" font-weight="bold" font-size="18" fUl="white" id= 
"text_l">dSVG sample behavior: 
pan</text> 

<text y="365" x="20" font-size="12" id= "content">Content of file: 
dsvg:pan</text> 

<text y="380" x="20" font-size="12" id= "expected">The dsvg:pan element 
translates the x,y coordmates of a document by a specified 
amout.</texC> 

<text y="395" x="20" f6nt-size="12" id= "depend">The type of pan can be either 

relative or 

absolute.</text> 

<line y2="340" x2="744" yl="340" xl="0" stroke-width="2" stroke="#5f86Bl" 
fill="#5f86Br id="bottom_line"/> 

<!— adding behavior — > 

<dsvg:button xlink:href="dsvg/skinButton_Windows.svg#skinButton" 
autoScale="true" disabled="false" selected="false" toggle="false" height="18" 
width="100" y="125" x="100" label="left" id="dsvgUniqueID_0"> 

<dsvg:pan type="relative" y="0" x="50" id="dsvgUniqueID_l"/> 

•^dsvg:button> 
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<dsvg:buttonxlink:href^"dsvg/skinButton_Windows.svg#skinButton" 
autoScale="true" disabled="false" selected="false" toggle="false" height="18" 
width="100" y="125" x="300" label="right" id="dsvgUniqueID_5"> 

<dsvg:pan type="relative" y="0" x="-50" id="dsvgUniqueID_2"/> 
</dsvg:button> 

<dsvg:buttonxlink:href^"dsvg/skiiiButton_Windows.svg#skinButton'' 
autoScale="true" disabled="false" selected="false" toggle="false" height="18" 
width=" 100" y=" 100" x="200" label="up" id="dsvgUniqueID_6"> 

<dsvg:pan type="relative" y="50" x="0" id="dsvgUmqueID_3"/> 

) </dsvg:button> 

<dsvg:buttonxlmk:href="dsvg/skinButton_Windows.svg#skinButton" 

autoScale="true" disabled="false" selected="false" toggle=" false" height="18" 
width=" 100" y=" 1 50" x="200" label="down" id="dsvgUniqueID_7"> 

<dsvg:pan type="relative" y="-50" x="0" id="dsvgUmqueID_4"/> 
5 <dsvg:button> 
</svg> 

The 'postURL' element 

The 'postURL' element loads a document or fragment (an element, possibly witii 
20 children) and inserts it into the specified location in the DOM or mto a new 

documentFragment (a lightweight document useful for storing XML data of a non-native 
format). 

<!ENnTY % postURLExt "" > 
<!ELEMENT dsvg:postURL (%behaviors;) > 

25 <! ATTLIST dsvg:postURL 
%stdBehaviorAttrs; 

xmbis:xlink CDATA #FIXED 'http://www.w3.org/1999/xlink' 

xlink:href %URI; #IMPLIED 

collection %Text; IMPLIED 

30 mimcType %Text; IMPLIED 
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synchronous 


%Boolean; 


"false" 


elemenllD 


ID; 


#IMrLlbD 


insertAs 


%InseTtAs; 


cniia 


from 


%r rom. 


iiTTV/fPT Tpn 
?riiVLri-«lIll-/ 


offset 


%Integer; 


#IMPLIED 


ignoreText 


%Boolean; 


•false' 


ignoreCData 


%Boolean; 


'false' 


ignoreComments 


%Boolean; 


'false' > 



Attribute definitions: 
xlink:href="<uri>" 

A reference to the URI that the data will be posted to, 

If the attribute is not specified, the post will not occur, 
collection = '<string>' 

The name of the collection group to post All variables and aliases belonging to. 

this collection group will be posted. 
If this attribute is not provided, no data will be posted. 
mimeType = '<string>' 

The mime type to be reported to the server, 
synchronous = "(true \ false)" 

Specifies whetiier the returned XML data should be loaded synchronously or 
asynchronously. If synchronously, the next behavior will not be executed until 
after the XML has successfiilly loaded. If asynchronously, tiie next behavior wUl 
be executed immediately, without waiting for the XML to be loaded. For best 
performance, synchronous loading should only be iised vdien subsequent 
behaviors vvdll be accessing the XML data being loaded. 
If this attribute is not provided, the default is "false". 

elementID = "name" 

The 'id' attribute of the element at which the loaded element is to be mserted. 

insertAs = "(parent | sibling 1 child | replacement | newDOM)" 
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Specifies whether the returned XML data is to be inserted as a Child of the target 
element, as the parent of the target element, as a sibling of the target element, as a 
replacement to the target element, or as a replacement for the entire DOM. 
If this attribute is not provided, the default is "child", 
offset = "<integer>" 

If inserting as a child, 'offset* specifies the number of nodes (not including 
comment nodes) from the top or bottom (i.e. first or last child) where the returned 
XML data will be inserted. A negative value specifies up towards the first child. A 
positive value specifies down towards the last child. If there are fewer nodes than 
specified by 'offset', the retumed element(s) will be inserted as either the first child 
or the last child. 

If inserting as a sibling, 'offset' specifies the number of nodes (not including 
comment nodes) before (if 'offset' is negative) or after (if 'offset' is positive) the 
target element where the retumed element(s) will be inserted. If there are fewer 
nodes than specified by 'offset', the element will be inserted as either the first child 
or the last child of the parent. 

If inserting as a parent or replacement, 'offset' is ignored. 
If this attribute is not provided, the default is 0. 
from = "(top I bottom)" 

If inserting as a child, 'from' specifies whether 'offset' is relative to the top (first 
child) or bottom (last child). 

If inserting as a parent, sibling or replacement, 'from' is ignored. 
If this attribute is not provided, the defauh is "bottom". 
ignoreText = "(true | false)" 

Specifies whether text nodes should be ignored or not when coimting 'offset' nodes 
from the target element. 

If this attribute is not provided, the default is 'false'. 
ignoreCData = "(true | false)" 

Specifies whether CD ATA nodes should be ignored or not when covmting 'offset' 
nodes from the target element. 
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If this attribute is not provided, ihe default is 'falise'. 
ignoreComments = "(trae | false)" 

Specifies whether comment nodes should be ignored or not when counting 'offset' 

nodes from the target element. 

If this attribute is not provided, the default is 'false'. 

The postURL element example provided below shows a textBox and comboBox 

whose data and selection gets posted to a URL. 

<svg xmlns:dsvg="http://www.corel.com/schemas/2002/dSVGl 1 " 

xmhis:xlink="http://www.w3.org/1999/xlink" height="420px" width="760px" 

onload="init(evt)" viewBox^"0 0 760 4i20"> 

<script type="text/ecmascript" xlink:href="dsvgl l/dSVG.js"> 
<script type="text/ecmascript" xlink:href="dsvgll^aseUI.js"/> 
<script type="text/ecmascript" xlink:href^"dsvgl l/constraint.js"/> 
<script type="text/ecniascript" xlink:href=^"dsvgl l/textbox.js"/> 
<script type="text/ecmascript" xlink:href="dsvgl l/combobox.js"/> 
<script type="text/ecmascript" xlink:href="dsvgl l/button.js"/> 
<script type="text/ecmascript" xlink:hre^"dsvgl l/contextMenu.js"/> 
<script type="text/ecmascript" xlink:href="dsvgll/slider.js"/> 
<script type="text/ecmascript" xlink:href="dsvgll AistBox.js"/> 
<scripttype="text/ecmascript" xlink:href="dsvgll/scrollbar.js"/> 
<script type="text/ecmascript" xlink:href="dsvgl l/postURL.js"/> 

<dsvg:variable saveState="session" collection='*project" 
value="%'textr@value%" name="text"> 

<dsvg:variable saveState=" session" collection="project" 

value="%'cboColor'@value%" name="fiU"/> 

<dsvg:textBoxxlink:href="dsvg/skinTextbox_Default.svg#skinTextBox" 

autoScale="true" height="22" width="256.615" y="105" x="181" label="Enter the text 

that will appear on the third page" id="textl "/> 
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<dsvg:comboBox 

xliiik:href="dsvg/skinComboBox_Coinposite.svg#skinComboBox" autoScale="true" 
height="17" width="256.615" y="179" x="178" label="Enter the color you want for the 
rectangle" id="cboColor"> 

<dsvg:item value="blue" data="blue" id="iteml "/> 
<dsvg:item value- 'green" data=" green" id="item2"/> 
<dsvg:item value="red" data="red" id="item3"/^ 
<dsvg:item valu^"purple" data="purple" id="item4"/> 
<dsvg:item valu^"navy" data="navy" id="item5"/> 
</dsvg:comboBox> 

<dsvg:bxittonxlink:href="dsvg/skiiiButton_Windows.svg#skinButton" 
autoScale="true" height=" 1 8" width=" 100" y="247" x="258" label="postURL" 
id="postURL"> 

<dsvg:postlJRL insertAs="newDOM" collection="project" 
xlink:href="http://myURL.coin/SessionTest/sgproxy.asp?CXS=Page2" 

id="dsvgUniqueID_10"/> 
</dsvg:buttoif> 

</svg> 

The 'zoom' element 

The 'zoom' element scales the document by the specified amount. Internally, this 
sets the SVG DOM's currentScale variable, which should trigger a 'zoom' event. 
<!ENnTY % zoomExt"" > 
<!ELEMENT dsvg:zoom EMPTY > 
<!ATTLIST dsvg:zoom 
%stdBehaviorAttrs; 

scale %Number; #IMPLIED 
cx %Coordinate; #IMPLIED 
cy %Coordinate; #IMPLIED 
type %Type; 'relative' > 
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Attribute definitions: 
scale = "<number>" 

The scale factor to zoom in or out by. A factor greater than 1 results in zooming 
in. A factor less than 1 results in zooming out. 
cx = "<coordinate>" 

The x-coordinate of the location in the document that will stay preserved after the 
zoom, with respect to the browser window, 
y = "<coordinate>" 

The y-coordinate of the location in the document that will stay preserved after the 
zoom, with respect to the browser window, 
type = "(absolute | relative)" 

Specifies whether to set the document's current scale to the specified 'scale' 
amoxmt (absolute) or to modify the document's current scale by the specified 
'scale' amount (relative). 

If this attribute is not provided, the default is "relative". 

The zoom example provided below shows two buttons that invoke 'zoom' 
behaviors— one to zoom the dociraient in by a factor of 2 and one to zoom the document 
out by a factor of 2. 

<?xnil version=" 1 .0" standalone="no"?> 

<!DOCTYPE svg SYSTEM "../SVGdSVG.dtd"> 

<svg xmins:dsvg="http://www.corel.com/schemas/2002/dSVGl 1 " 

xmhis:xlink="http://www.w3.org/1999/xlink" height="410px" width="744px" 

onload="init(evt)" viewBox="0 0 744 410"> 

<script type="text/ecmascript" xlmk:href="dsvgl l/dSVG.js"/> 
<script type="text/ecmascript'* xlink:href="dsvgl 1/baseUI.js"/^ 
<script type="text/ecmascript" xlmk:href^"dsvgl 1 /constraint.] s"/> 
; <script type="text/ecmascript" xlink:href="dsvgl l/zoom.js"/> 
<script type="text/ecmascript" xlmk:href="dsvgl l/attributeZooniAndPan.js"/> 
<script type="text/ecmascript" xlink:href="dsvgl l/button.js"/> 
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<!— template ~> 



<rect height="40" width="744" y="0" x="0" fill="#5f86Bl" id="title_rect"/> 
<text y="25" x="20" font-weight="bold" font-size=" 1 8" fiU= "white" id= 
"text_l">dSVG sample 

behavior:zbom</text> 

<text y="365" x="20" font-size=" 12" id= "content">Content of file: dsvg:zoom, 
dsvg:zoomAndPaii</text> 

<text y="380" x="20" font-size="12" id= "expected">The dsvg:zoom element 
will zoom in / zoom out by the amount specified in the scale 
attribute.</text> 

<texty="395" x="20" font-size="12" id="depend"/> 

<line y2="340" x2="744" y 1="340" xl="0" stroke-width="2" stroke="#5f86B 1 " 
fiU="#5f86Bl" id="bottom_line"/> - 

<!— adding behavior ~> 

<dsvg:buttondsvg:zoomAndPan="magmfy" 
xlink:href="dsvg/skinButtonZoomIn.svg#skinButtonZoomIn" autoScale="true" 
disabled="false" selected="false" toggle=" false" height="21" width="20" y="100" 
j^"120" label="zoomin" id="button_in"> 

<dsvg:zoom type="relative" cy="50.5" cx="50.5" scale="2" 
id="dsvgUniqueID_2"/> 

</dsvg:button> 

<dsvg:buttonxlink:href="dsvg/skinButtonZoomOut.svg#skinButtonZoomOut" 
autoScale="true" disabled="false" selected="false" toggle="false" height-"21" 
width="20" y="100" x="170" label="zoom out" id="button_out"> 

<dsvg:zoom type="relative" cy="50.5" cx="50.5" scale="0.5" 
id="dsvgUniqueID_3"/> 
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</dsvg:button> 

<circle dsvg:zoomAndPan="disable" r="30" cy="200" cx="180" 
stroke-width="5" stroke="darkred" fill="red" id="circle_disabled"^ 

<circle dsvg:zooinAndPan="magnify" r="30" cy="200" cx="350" 
stroke-width="5" stroke="darkblue" fill="#5f86Bl" id="circle_magiiified"A> 

<text y^"330" x="20" font-size=" 10" id= "zoom_text">dsvg:zooniAndPan 
attributes a^jplied to: Red circle (disabled) Blue circle 

(inagnify)</text> 

<text y="80" x="50" font-size="10" id= "zooin_textl">Select the Zoom In / 

Zoom Out 

buttons.</text> 

</svg> 

The 'playSound' element 

If the viewer 13 supports sound, then the playSound element may be implemented 
to plays an audio file. The following is the syntax for the 'playSound' element: 
<dsvg:playSound 
id="name" 
event="string" 
xlink:hre^"<uri>" 

/> 

The 'id' attribute is a standard XML attribute for assigning a unique "name" to an 
element. The 'id' attribute is optional. The 'event' attribute specifies the event that will 
trigger this action. The 'xlink:href attribute specifies the audio file to play. 

The Focus Element 25 

Often in an application, a user desires to select an object or group of objects, via 
clicking or dragging a window around them, or even displaying a marquee around the 
selected object(s). 
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The 'focus' element defines a group of elements. Whenever an element, whose 
•focusGroup' attribute is equal to the 'id' attribute of a 'focus' element, is clicked, the 
'focus' element's child action elements will be executed, its 'elementlD' attribute will be 
updated to reflect the ID of the element with focus, and its 'elementName' attribute will be 
updated to reflect the type of element with focus (e.g. 'reef, 'circle', etc.). As well, the 
'previousID' and 'previousName' attributes are also stored for reference, so that the 
behaviors can be "imdone" for the previously selected element. 

<!ENnTY % focusExt "" > 
<!ELEMENT dsvgtfocus (%Behaviors;) > 
<! ATTLIST dsvg:focus 
%stdBehaviorAttrs; 

elementlD ID #IMPLIED 

elementName %Text #IMPLIED 

previousID ID #IMPLIED 

previousName %Text #IMPLIED> 

Attribute definitions: 

elementlD = "name" 

The 'id' attribute of the element currently with focus. 

If this attribute is provided, the element with that ID will have the initial focus and 
the 'focus' element's child behaviors will be run. 
elementName = '<string>' 

The name of the element currently with focus, e.g. 'reef, 'circle', etc. 

previousID = "name" 

The 'id' attribute of the element previously witii focus. 
previousName = '<stfing>' 

The name of the element previously with focus, e.g. 'reef, 'circle', etc. 
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Figures 12A and 12B show circle and text elements in different focus groups, each 
setting the other. The focuGroup attribute adds the ability to store the ID of similar type 
elements that are assigned to that group. Default focus can be given to an element by 
adding the focus attribute to that element. The example is provided below: 
5 <?xml version="1.0" standalone="no"?> 

<!DOCTYPE svg SYSTEM " ../SVGdSVG.dtd"> 
<svg xmhis:xlink="http://www.w3.org/1999/xlink" 

xmhis:dsvg="http://www.corel.com/schemas/2002/dSVGl 1" heightr="410px" 
width="744px" onload="init(evt)" viewBox="0 0 744 410"> 
10 <script type="text/ecmascript" xlink:href="dsvgl l/dSVG.js"/> 

<script type="text/ecmascript" xlink.:href="dsvgl l/baseUI.js"> 
<script type="text/ecmascript" xlink:href="dsvgll/constraint.js"> 
<script type="text/ecmascript" xlink:hre^"dsvgl l/focus.js"/> 
<script type="text/ecmascript" xlink:href^"dsvgl l/setAttribute.js"/> 
15 <script type="text/ecmascript" xlink:href="dsvgl l/setStyle.js"/> 

<script type="text/ecmascript" xlink:href="dsvgl l/setTransform.js"/> 

<!— template — > 

20 <rect height="40" width="744" y="0" x="0" fill="#5f86Bl" id="title_rect"/> 

<text y="25" x="20" font-weight="bold" font-size=" 1 8" fill="white" 
id="text_l ">dS VG sample behavior: focus - with added attributes focusGroup and focus 
</text> 

<text y="365" x="20" forit-size=" 12" id="content">Content of file: dsvg:focus, 
25 dsvg:setTransfonn, dsvg:setAttribute, dsvg:setStyle, (added attributes dsvg:focus, 
dsvg:focusGroup) 
</text> 

<text y="380" x="20" font-size="12" id="expected">The dsvg:focusGroup 
attribute adds the ability to store the ID of similar type elements that are assigned to that 
30 group. 
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<:/text> 

<texty="395" x="20" font-size="12" id="depend">Default fociis can be given to 
an element (red circle above) by adding the dsvgrfocus attribute to that element. 

</text> 

<line y2="340" x2="744" yl="340" xl="0" stroke-width="2" stroke="#5f86Bl" 
fill="#5f86Bl" id="bottom_line"/> 

<!— adding behavior —> 

<text y="250" x="20" font-size="12" id="desc">The red, blue, green circles are 
part of the focusGroup. The orange circle is not. 
</text?> 

<text y=" 1 50" x="200" font-size=" 1 2" id="desc_2">Click on the red, green and 
blue circles to set focus. 
</text> 

<text y="170" x="200" font-size="12" id="desc_3">Hover over the 'red', 'green* 
and 'blue' text elements to set focus. 

</text> 

<dsvg:focus elementID="redCircle" event=" onclick" id="circleGroup"> 

<dsvg:setTransfonn scale=" 1 .2" vAlign="middle" hAlign="nuddle" 

absolute="true" elementID="%circleGroup@elementID%"/> 

<dsvg:setTransform scale="l" vAlign="middle" hAlign="middle" 

absolute="true" elementID="''/ocircleGroup@previousID%''/i> , 

<dsvg:setAttributeyalue="%(circleGroup@elementID)@fill%Text" 

attribute="elementID" elementIEN"textGroup"/> 
</dsvg:focus> 

<dsvg:focus event="onmouseover" id="textGroup"> 

<dsvg:setStylevalue="%(textGroup@elementID)@cdata%" 

property="fill" elementID=^"%textGroup@elementID%"/> 
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<dsvg:setStyle value="black" property="fm" 

elementID="%textGTOup@previousID%"/> 

<dsvg:setAttributevalue="%(textGroup@elementID)@cdata%Circle" 

attribute="elementiP" elementID="circleGroup"/> 
</dsvg:focus> 

<circle dsvg:focus="true" dsvg:focusGroup="circleGroup" r="30" cy="100" 
cx="50" ffll="red" id="redCircle"/> 

<circle dsvg:focusGroup="circleGroup" i="30" cy="200" cx="50" fill="blue" 

id="blueCircle"/i> 

<circle dsvg:focusGroup="circleGroup" r="30" cy="100" cx="150" fill="green" 

id="greenCircle"/> 

<circle r="30" cy="200" cx="150" fill="orange" id="orangeCircle"> 
<text dsvg:focus="true" dsvg:focusGroup="textGroup" y="80" x="200" 

id="redText">ied</text> 

<text dsvg:focusGroup="textGroup" y="80" x="250" id="blueText">blue</text> 

<text dsvg:focusGroup="textGroup" y="80" x="300" 
id="greenText">green</text> 

<text y="80" x="350">orange</text> 

</svg> 

The Constraint Element 26 

One feature missing from SVG markup is the concept of constraints. A designer 
may desire zoom-dependent visibility of labels on a map. Another desire may be to have 
the coordinates or dimensions of one element to be dependent on the coordinates or 
dimensions of another element. 

The 'constraint' element 26 defines the rules for constraining anything about a 
target element, such as its attributes, style properties, bounding box and dimensions due 
to transformations, zoom and pan. The appropriate mutation event listeners are • 
automatically set based on the attributes so that the 'event' attribute is not required. 
<!ENnTY % constraintExt "" > 
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<!ELEMENT dsvgxonstraintEMPTY > 
<! ATTLIST dsvgxonstraint 



%stdBehaviorAttrs; 






elementID 


ID 


#IMPLIED 


ancestorlD 


ID 


#IMPLIED 


numAncestors 


%Integer; 


#IMPLIED 


attributeName 


%Text; 


#IMPLIED 


propertyName 


%Text; 


#IMPLIED 


value 


%Text; 


#IMPLIED 


scalelmmunity 


%BooIean; 


"false" 


scaleXImmunity 


%Boolean; 


"false" 


scale YImmunity 


%Boolean; 


"false" 


preserveAspectRatio%PreserveAspectRatio; 


"false" 



hAlign 


%HAlign; 


"none" 


vAlign 


%Valign; 


"none" 


width 


%Length; 


#IMPLIED 


height 


%Length; 


#IMPLIED 


left 


%Goordinate; 


#IMPLIED 


right 


%Coordinate; 


#IMPLIED 


top 


%Coordinate; 


^IMPLIED 


bottom 


%Coordinate; 


#IMPLIED > 



Attribute definitions: 
elementID = "name" 

The 'id' attribute of the target element. 

If this attribute is not provided, the target element is the parent of the 'constraint' 
element. 
ancestorlD = "name" 

The 'id' attribute of an ancestor of the target element. Used to calculate the 
cumulative transform between the ancestor element and the target element . The 



cumulative transform is the transformation matrix from the user coordinate system 
on the target element (after application of the 'transform' attribute) to the user 
coordinate system on the ancestor element (after application of its 'transform' 
attribute). This cumulative transform will be nullified if the 'scalelmmunity', 
'scaleXImmunity' or 'scale Ylmmunity' attribute is set to 'true. 
If this attribute is not provided, the ancestor element is assumed to be the target 
element's parent. 

numAncestors = "<integer>" 

The number of ancestors.from the target element. Used instead of the 'ancestorlD' 
attribute to locate the target element's ancestor when its 'id' attribute is not known. 
If the 'ancestorlD' is provided, this attribute is ignored. If this attribute is not 
provided, the ancestor element is assumed to be the target element's parent. 

attributeName = '<string>' 

The name of the attribute to be constrained (e.g. 'stroke-width'). 

propertyName = '<string>' 

The name of the property, within a 'style' attribute, to be constrained (e.g. 

'stroke-width'). 

value = '<string>' 

The value that the attribute of style property is to be given. If the constraint 
specifies scale or zoom immunity, this attribute will be ignored, as it will be 
calculated automatically to counteract the scale or zoom, 
scalelmmunity = "(true | false)" 

Specifies that the cumvdative transform between the ancestor element and the 
target element is to be nulUfied. The cumulative transform is the transformation 

matrix ftom the user coordinate system on the target element (after application of 
the 'transform' attribute) to the user coordinate system on the ancestor element 
(after application of its 'transform' attribute). If neither the 'attributeName' nor the 
•propertyName' is specified, then the cumlative transform will be counteracted 
with an equal but inverse transform applied to the target element. If either the 
•attributeName' or the 'propertyName' is specified, then the corresponding attribute 
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or style property (e.g. 'stroke-width') of the target element will appear to be 
immiine to scaling relative to the specified ancestor element. Essentially, the value 
of the attribute or style property will be modified so as to compensate for the scale 
factor of the cumulative transform. For non-uniform scaling, the larger of the two 
scale factors is compensated for. Note that applying scale immunity to an attribute 
or style property that is not of type <length> (e.g. 'fill') would not make sense. 
scaleXImmunity = "(true | false)" 

The same as 'scalelmmunity' except that for non-uniform scaling, the scale factor 
along the x-axis wiU be compensated for, instead of the larger of the two scale 
factors being compensated for. 

scaleYImmimity = "(true | false)" 

The same as 'scalelmmunity' except that for non-uniform scaling, the scale factor 
along the y-axis wiU be compensated for, instead of the larger of the two scale 
factors being compensated for. 

preserveAspectRatio = "(vertical | horizontal | min | max | none)" 

Specifies the dimension whose length is to be preserved, thus scaling the target 
element in the other dimension so as to preserve the original aspect ratio 
(unaltered by a transformation). If 'vertical', then the object will be scaled along 
the X-axis. If 'horizontal', then the object will be scaled along the y-axis. If 'min', 
then the scale factors along both axes will be examined and the greater of the two 
will be set to be equal to the lesser of the two. If 'max', then the scale factors along 
both axes will be examined and the lesser of the two will be set to be equal to the 
greater of the two. 

If this attribute is not provided, its default is "none", meaning that the aspect ratio 
will not be preserved. 
hAlign = "(left | middle | right)" 

The part of the target element, along the x-axis, that is to have its position 
preserved after executing the constraint. For example, 

pres.erveAspectRatio="vertical" might cause the target element to be scaled along 
the X-axis, causing its horizontal position to change. Specifying hAUgn="right" 
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would cause the right edge of the target element to remain at the same 
x-coordinate after the constraint is applied. 
vAlign = "(top 1 middle | bottom)" 

The part of the target element, along the y-axis, that is to have its position 
preserved after executing the constraint. For example, 

preserveAspectRatio="horizontal" might cause the target element to be scaled 
along the y-axis, causmg its horizontal position to change. Specifymg 
vAlign="top" would cause the top edge of the target element to remain at the same 
y-coordinate after the constraint is applied, 
width = "<length>" 

The width that the target element must be. For example, if the target element is a 
'g' tag (a group) containing many elements, its bounding box is calculated, from 
Which its total width is determined, and an appropriate scale factor is applied 
along the x-axis to achieve the specified width, 
height = ••<length>" 

The height that the target element must be. For example, if the target element is a 
•g' tag (a group) containing many elements, its bounding box is calculated, from 
which its total height is determined, and an appropriate scale factor is appUed 
along the y-axis to achieve the specified height. 

left="<coordinate>" 

The x-coordinate where the left edge of the target element must be. For example, 
if the target element is a 'g' tag (a group) containing many elements, its bounding 
box is calculated, from which the x-coordinate of its left edge is determined, and 
an appropriate translation is applied along the X-axis to achieve the specified 

position. If the 'right* attribute is also specified, both edges will be set, which will 
likely also require a scale transformation, 
right = "<coordinate>" 

The x-coordinate where the right edge of the target element must be. For example, 
if the target element is a 'g' tag (a group) containing many elements, its bounding 
box is calculated, from which the x-coordinate of its right edge is determined, and 
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an appropriate translation is applied along the x-axis to achieve the specified 
position. If the 'left' attribute is also specified, both edges will be set, which will 
likely also require a scale transformation, 
top = "<coordinate>" 

The y-coordinate where the top edge of the target element must be. For example, 
if the target element is a 'g' tag (a group) containing many elements, its bounding 
box is calculated, from which the y-coordinate of its top edge is determined, and 
an appropriate translation is applied along the y-axis to achieve the specified 
position. If the 'bottom' attribute is also specified, both edges will be set, which 
will likely also require a scale transformation. 

bottom = "'9;oordinate>" 

The y-coordinate where the bottom edge of the target element must be. For 
example, if the target element is a 'g' tag (a group) containing many elements, its 
bounding box is calcvdated, from which the y-coordinate of its bottom edge is 
determined, and an appropriate translation is applied along the y-axis to achieve 
the specified position. If the 'top' attribute is also specified, both edges will be set, 
which will likely also require a scale transformation. 

Other Elements 

Other elements may be added to the system 20: 
The 'action' element 

The 'action' element is a container used to group dS VG behaviors with common 
'event' attribute values together so tiiat the behavior elements do not actually need to 
specify the 'event' attribute themselves. It is also used to indirectiy associate its child 
behaviors to an element, via the 'listener' element, allowing them to be reused. 
<!ENTITY % actionExt "" > 
<!ELEMENT dsvg:action (%Behaviors;) > 
<!ATTLIST dsvg:action 
%stdBehaviorAttrs; > 
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Figures 13A and 13B show a push button 161 and a circle 162 , both wifli 
indirectly associated behaviors. The action element is a container for otiier behavior 
elements. Actions can be associated indirectly using a listener element, or they can be set 
up directiy as a child of an observing element. The example is provided below: 
<?xml version=" 1 .0" standalone="no"?> 
<!DOCTYPE svg SYSTEM "../SVGdSVG.dtd"> 
<svg xmhis:xlink="http://www.w3.org/1999/xlink" 

xnUns:dsvg="http://www.corel.com/schemas/2002/dSVGl 1" height="410px" 

width="744px" onload="init(evt)" viewBox="0 0 744 410"> 

<script type="text/ecmascript" xlink:hrief="dsvgll/dSVG.js"> 
<script type="text/ecmascript" xlink:href="dsvgl l/baseUI.js"A> 
<script type="text/ecmascript" xlink:href^"dsvgl l/constraint.js"/> 
<script type="text/ecmascript" xlink:hre^"dsvgl l/setAttribute.js"/> 
<script type="text/ecmascript" xlink:href="dsvgl l/button.js"/> 
<script type="text/ecmascript" xlink:href="dsvgl l/setData.js"/> 

<!— template —> 

<g id="template"> 

<rectheight="40" width="744" y="0" x="0" mi="#5f86Bl" 

id="title_rect"/> 

<text y="25" x="20" font-weight="bold" font-size=" 1 8" fill=" white" 
id="text_l ">dSVG sample behavior: action and listener 
</text> 

<text y="365" x="20" font-size=" 12" id="content">Content of file: 
dsvgiaction, dsvg:listener 
</text> 

<text y="380" x="20" font-size=" 12" id="expected">The dsvg:action 
element is a container for other dSVG behavior elements. 
</text> 
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<text y="395" x="20" foiit-size="12" id- 'depend"> Actions can be 
associated indirectly using a listener element, or they can be set up directly as a child of 
an observing element. 

</text> 

5 <line y2="340" x2="744'' yl="340" xl="0" stroke-width="2" 

stroke="#5f86Bl" fill="#5f86Bl" id="bottom_line"/> 

<text y="85" x="140" font-size="12" id="text_descl">l. Sample of an 
indirect 'action / listener' observed by a UI Control. 
</text> 

10 <text y=" 115" x=" 140" font-size=" 12" id="text_desc2">2. Sample of a 

direct 'action' set up as child of the UI Control. 

</text> 

<texty="205" x="140" font-size="12" id="text_desc3">3. Sample of an 
indirect 'action / listener' observed by a basic SVG element. 
15 </text> 

<text y="265" x=" 140" foht-size=" 12" id="text_desc4">4. Sample of a 
direct 'action' set up as a child of a basic SVG element. 

</text> 

<text y="60" x="20" font-weight="bold" font-size=" 12" 
20 id="text_desc3 a">Click the button(s) to execute the beha\dors. 

</text> 

<texty="160" x="20" font-weight="bold" font-size="12" 
id="text_desc4a">Mouseover the SVG shapes to execute the behaviors. 
</text> 

25 <texty="70"x="627"font-weight="bold"font-size="12" 
id="target_text">Target circle 
</text> 

<Jg> 

30 <!- adding behavior ~> 
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<g id="actions"> 

<dsvg:listener handler="actionGreen" observer="circle_l " 
event=" mouseover" id="listenerGreen"/> 

<dsvg:listener handler="actionRed" observer="button_l " event=" callback" 

id="listenerRed"/> 

<dsvg:action id="actionGreen"> 

<dsvg:selAttribute value="green" attribute="fiir' 
elementID="circle_2"id="dsvgUniqueID_3"/> 

<dsvg:setData value="# 3" elementID="textNumber" 
id=^"dsvgUniqueID_12a"/> 

</dsvg:action> 

<dsvg:action id="actionRed"> 

<dsvg:setAttribute value="red" attribute="fiir' 
elementID="circle_2" id="dsvgUniqueID_13"/^ 

<dsvg:setData value="# 1 " elementID="te3rtNumber" 

id="dsvgUmqueID_l 2c"> 

</dsvg:action> 

<!%> 

<dsvg:button xlink:href="dsvgl l/skinButton_Windows.svg#skinButton" 
autoScale="true" disabled="false" selected="false" toggle=" false" height="18" 
width=" 1 00" y="70" x="20" label="Fire action" id="button_l "/> 

<dsvg:buttonxlink:href="dsvgll/skiiiButton_Wmdows.svg#skinButton" 

autoScale="trae" disabled="false" selected="felse" toggle="false" height=" 1 8" 
width=" 100" y=" 100" x="20" label="Fire action" id="button_2"> 
<dsvg:action id="actionOrange"> 

<dsvg:setAttribute value="orange" attribute="fill" 

elementID="circle_2" id="dsvgUniqueID_13"> 

<dsvg:setData value="# 2" elementID="textNvimber" 

id="dsvgUniqueID_12b"/> 
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</dsvg:action> 
</dsvg:button> 

<circle r="25'' cy="200" cx='75" stroke-width="5" stroke="darkbl^^^^ 

mi="#5f86Bl" id="circle_l"/> 

<circle r="50" cy="132" cx="662" stroke-width="5" stroke="black" fill="none" 

id="circle_2"/> 

<rect height^"50" width="50" y="240" x="50" stroke-width="5" 
s1roke="darkblue" fm="#5f86Bl" id="rect_l"> 

<dsvg:actioii event="oimiouseover" id="actionGold"> 

<dsvg:setAttribute value="#5f86B 1 " attribute="fill" 
elementID="circle_2" id="dsvgUniqueID_9"> 

<dsvg:setData value="# 4" elementID="textNumber" 
id="dsvgUmqueID_l 2"/> 

</dsvg:action> 

</recP> 

<rect height="150" width="150" y="50" x="584" stroke-width="2" 
stroke="black" fill="none" ■id="base_rect"A> 

<text y="145" x="662" text-anchor="middle" font-size="36" fill="white" 
id="textNumber"># 

</text> 

</svg> 

The 'alias' element 

The 'alias' element acts as a proxy, or representative, for some other value, such as 
an atteibute of an element. An 'alias' element differs from a 'variable' element in tiiat an 
alias has a 1 : 1 relationship \frith its reference, whereas a variable can be an equation made 
up of multiple references. This 1:1 relationship allows the reference's value to be changed 
by modifying the 'alias' element. An 'alias' element functions as a 'variable' element when 
posting with the 'postURL' element, except that 'alias' uses the value of its reference. If a 
server's response to the 'postURL' behavior contains 'alias' elements, their 'initialValue' 
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attributes will be applied to their references. Thus an 'alias' element is used to bring data 
back into the document, e.g. for session management. 
<!ENTITY % aliasExt "" > . 
<!ELEMENT dsvg:alias EMPTY > 
5 <! ATTLIST dsvgralias 



id 


name 


#IMPLIED 


name 


%Text; 


#IMPLIED 


initialValue 


%Text; 


#IMPLIED 


reference 


%Text; 


#IMPLIED 


saveState 


%Text; 


#IMPLIED 


collection 


%Text; 


#IMPLIED > 



Attribute definitions: 
id = "name" 

Standard XML attribute for assigning a unique name to an element, 
name = '<string>' 

The identifier for the alias, used to access its value via the dSVG expression 

syntax. 

initialValue = '<string>* 

The value to be applied to the reference at load time, 
reference = '<string>' 

A specific attribute of a specific element, denoted using the dSVG expression 

syntax, e.g. %myComboBox@value%. 
saveState = "(session | page | application)" 

Indicates the purpose of the 'alias' element. When posting the alias to a server, the 

values of 'page', 'application' or 'session' are appropriate, & will be stored on the 

server for durations according to those categories, 
collection = '<string>' 

An identifier used to group variables for scoping purposes. For example, 

coUectionl .my Var is different than collection2.my Var. Also, one can specify the 



15 



20 



25 



30 



-70- 



collection name when posting to a server, which will send all variables in that 
collection. 

The 'listener' element 

5 Hie 'listener* element listens for the specified event on the observer element and, if 

found, dispatches the event to the tondler behavior element (typically an 'action' element) 
for processing. This is usefiil because tiie behaviors are not directiy associated to tiie 
observer element, tiius allowing them to be reused. 
<!ElSrnTY % listenerExt > 
10 <!ELEMENT dsvgrlistener (%Behaviors;) > 
<! ATTLIST dsvg:listener 

%stdBehaviorAttrs; 

observer ID #IMPLIED 

handler ID #IMPLIED> 

15 

Figures 13A and 13B show a push button 161 and a circle 162, both with 
indirectiy associated behaviors. The example is provided below: 
<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg SYSTEM "../SVGdSVG.dtd"> 
20 <svgxmlns:xlink="http://www. w3.org/1999/xlink" 

xmhis:dsvg="http://www.corel.com/schemas/2002/dSVGl 1 " height="410px" 

widtii="744px" onload="init(evt)" viewBox="0 0 744 4l0"> 

<script type="text/ecmascript" xlink:href="dsvgl l/dSVG.js"/> 

<script type="text/ecmascript" xluik:href="dsvgl l/baseUI.js"/> 
25 <script type="text/ecmascript" xlink:href="dsvgl 1/constraint.js"/^ 

<script type="text/ecmascript" xlink:href="dsvgl l/setAttribute.js"/> 
<script type="text/ecmascript" xlink:href="dsvgl l/button.js"/> 
<script type="text/ecmascript" xlink:href="dsvgl l/setData.js"/> 

30 <!— template —> 
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<g id="template"> 

<rectheight="40" width="744" y="0" x="0" fill="#5f86Bl" 

id="title_rect"/> 

<text y="25" x="20" font-weight="bold" font-size="18" fill="white" 
id="text_l">dSVG sample behavior: action and listener 
<texC> 

<texty="365" x="20" font-size="12" id="content">Contentof file: 
dsvg:action, dsvg:listener 
</text> 

<text y=" 3 80" x="20" font-size=" 1 2" id="expected">the dsvg:action 
element is a container for other dSVG behavior elements. 
</texe> . 

<texty="395" x="20" font-size="12" id="depend">Actions can be 
associated indirectly using a Ustener element, or they can be set up directly as a child of 
an observing element. 

</text> 

<line y2="340" x2="744" yl="340" xl="0" stroke-width="2" 
stroke="#5f86Bl" fill="#5f86Bl" id="bottom_line"/> 

' <text y="85" x="140" font-size="12" id="text_descl">l. Sample of an 
indirect 'action / listener' observed by a UI Control. 
</text> 

<texty="115" x="140" font-size="12" id="text_desc2">2. Sample of a 
direct 'action' set up as child of the UI Control. 
</text> 

<texty="205" x="140" font-size="12" id="text_desc3**>3. Sample of an 
indirect 'action / listener' observed by a basic SVG element. 

</text> 

<^g^y=..265" x="140" font-size="12" id="text_desc4">4. Sample of a 
direct 'action' set up as a child of a basic SVG element. 
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<ytext> 

<text y="60" x="20" font-weight="bold" font-size=" 12" 
id="text_desc3a">Click the button(s) to execute the behaviors. 

</text>" 

<text y=" 1 60" x="20" font-weight="bold" font-size=" 12" 
id="text_desc4a">Mouseover the SVG shapes to execute the behaviors. 
</text> 

<texty="70" x="627" font-weight="bold" font-size="12" 
id="target_text">Target circle 
</text> 

</g> 

<!— adding behavior ~> 

<g id="actions"> 

<dsvg:listener handler="actionGreen" observer="circle_r' 

even^"mouseover" id="listenerGreen"/> 

<dsvg:listenerhandler="actionRed" observer="button_l" event="callback" 

id="listenerRed"/> 

<dsvg:action id="actionGreen"> 

<dsvg:setAttribute value="green" attribute="fiir' 
elementID="circle_2" id="dsvgUniqueID_3"/> 

<dsvg:setData value="# 3" elementID="textNumber" 
id="dsvgUniqueID_12a"/> 

</dsvg:action> 

<dsvg:action id="actioiiRed"> 

<dsvg:setAttribute value="red" attribute="fiir' 
elementlD="circle_2" id="dsvgUniquelD_l 3 "/> 

<dsvg:setData value="# 1" elementID="textNumber" 

id="dsvgUniqueID_12c"/> 
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</dsYg:action> 

</g> 

<dsvg:button xlink:href="dsvgl l/skinButton_Windows.svg#skinButton" 
autoScale="true" disabled="false" selected="false" toggle="false" height="18" 
width=" 100" y=" 70" x="20" label="Fire action" id="button_l "/> 

<dsvg:button xlink:href="dsvgl l/skinButton_Windows.svg#skinButton" 
autoScale="true" disabled="false" selected="false" toggle="false" height="18" 
widtii=" 1 00" y=" 1 00" x="20" label="Fire action" id="button_2"> 
<dsvg:action id="actionOrange"> 

<dsvg:setAttribute value- 'orange" attribute="fiir 
elementID="circle_2" id="dsvgUmqueID_13"/> 

<dsvg:setData value="# 2" elementID="textNumber" 

id="dsvgUmqueID_l 2b"/> 

</dsvg:action> 
<;/dsvg:button> 

<circle r="25" cy="200" cx="75" stroke-width="5" stroke="darkblue" 
fill="#5f86Br id="circle_l"/> 

<circler="50" cy="132" cx="662" stroke-width="5" stroke="black" fill= 

id="circle_2"/> 

<rectheight="50" width="50" y="240" x="50" stroke-width="5" 
stroke="darkblue" fill="#5f86B 1 " id="rect_l "> 

<dsvg:action event="omnouseover" id="actionGold"> 

<dsvg:setAttribute value="#5£86Bl" attribute="fill" 
elenientID="circle_2" id="dsvgUniqueID_9"/> 

<dsvg:setbata value="# 4" elementID="textNumber" 
id="dsvgUniqueID_l 2"/i> 

- </dsvg:action> 
</rect> 

<rect height=" 150" width=" 1 50" y="50" x="584" stroke-width="2" 
stroke="black" fill="none" id="base_rect"/> 
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y=.. 145.. x-"662" text-anchoi="middle" font-size="36" fill="white" 

id="textNumber"># 
</texO . 

</svg> 



10 



15 



20 



The Variable' element 

The 'variable' element acts as a proxy or representative for some other value, such 
as an attribute of an element. A 'variable' element can have a 1 : 1 relationship with an 
attribute or be an equation made up of multiple attributes and constants. Variables are 
intended as a convenient way of storing data as well as building complex expressions that 
can be used anywhere via dSVG expressions. Note that it is the author's responsibUity to 
not create self referential variables or circular variable references. 
<!ENTITY % variableExt "" > 
O.ELEMENT dsvg:variable EMPTY > 
<!ATTLIST dsvg: variable 

ID #IMPLIED 
%Text; #IMPLffiD 
%Text; #IMPLIED 
%Text; #IMPLIED 
%Text; #IMPLIED> 



id 

name 
value 
saveState 
collection 



Attribute definitions: 
id = "name" 

Standard XML attribute for assigning a unique name to an element. 

25 name = '<string>* 

The identifier for the variable, used to access its value via the dS VG expression 

syntax, 
value = *<string>' 

The value to be applied to the reference at load time. 
30 saveState = "(session | page | application)" 
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Indicates Ihe purpose of the 'variable' element. When posting the variable to a 
server, the values of 'page', 'application' or 'session' are appropriate, & will be 
stored on the server for durations according to those categories, 
collection = '<string>' 

An identifier used to group variables together, for scoping purposes. For example, 
coUectionl.myVar is different than collection2.myVar. Also, one can specify the 
collection name when posting to a server, which will send all variables in that 
collection. 

Figures 14A and 14B show a variable set to be the siim of the width of two 
rectangles. The variable element is able to assume different values. Selecting the button 
175 will set a new value for the 'variable' ($varRect). The example is provided below: 
<?xml version=" 1 .0" standalone="no"?> 
<!DOCTYPE svg SYSTEM "../SVGdSVG.dtd"> 
<svg xmhis:xlmlp="http://www. w3.org/l999/xlink" 

xmhis:dsvg="http://www.corel.com/schemas/2002/dSVGl 1 " height="420px" 

width="760px" onload="init(evt)" viewBox="0 0 760 420"> 

<script type="text/ecinascript" xlink:href="dsvgl l/dSVG.js"/i> 
<script type="text/ecmascript" xlink:href="dsvgl l/baseUI.js"/> 
<script type="text/ecmascript" xlink:href="dsvgl 1 /constraint.] s"/> 
<script type="text/ecmascript" xlink:href="dsvgl l/button.js7> 
<script type="text/ecmascript" xlink:href="dsvgl l/setAttribute.js"/> 
.<scripttype="text/ecmascript" xlink:hre^"dsvgll/setData.js'7><!-- template --> 
<rectheight="40" width="744" y="0" x="0" fill="#5f86Bl" id="title_rect"/> 
<text y="25" x="20" font-weight="bold" font-size="18" fill="white" 

id="text_l">dSVG sample behavior: variable 
</text> 

<text y="365" x="20" font-size="12" id="content">Content of file: dsvg:variable 
</text> 

<text y="380" x="20" font-size=" 12" id="expected">The dsvg:variable element is 
able to assume different values. 
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</text> 

<text y="395" x='*20" font-size="12" id="depend">Selecting the button will set a 
new value for the 'variable' (SvarRect). 
</text> 

<line y2="340" x2="744" yl="340" xl="0" stroke-width="2" stroke="#5f86Bl" 
fill="#5f86Bl" id="bottom_line"/><!- adding behavior ~> 

<dsvg:variable value="%redRect@width + blueRect@width%" name="varRect" 

id-"variableRect"> 

<rectheight="50" width="50" y="100" x="50" stroke="darkred" 
stroke-width="5" fill="red" id="redRect"/> 

<rectheight="50" width="50" y="180" x="50" stroke="darkblue" 
stroke-width="5" fill="#5f86Bl" id="blueRect"/> 

<text y="95" x="50" id="textRedRect">width = 50 

^text> 

<text >^"175" x="50" id="textBlueRect">width = 50 
</t&cC> 

o^Q^ y="175" x="150" id- 'textDesc3">Note: Once the button is selected, 
setAttribute is applied to the blue rect so width="previous 'SvarRecf value" 

</text> 

<dsvg:button xlink:href="dsvgl l/skinButton_Windows.svg#skinButton" 
autoScale='*true" height="18" width="100" y="295" x="50" label="New Variable" 

id="dsvgUniqueID_l "> 

<dsvg:setAttribute value="%$varRect%" attribute="width" 

elementID="blueRect"id="setAttRect"> 

<dsvg:setData value="width = %blueRect@width%" 

elementID="textBlueRect" id="setTextBlueRect"/> 

<dsvg:setData value="$varRect = %$varRect%" elementID="textl" 

id="setTextVar"/> 

</dsvg:button> 
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y="259" x="50" id="textDesc">$varRect = redRect@width + 
blueRect@width 
</text> 

<text y="310" x="170" id="textl">$varRect = 100 
</text> 

</svg> 

The *share* element 

The 'share' element is a container used to group any dSVG elements that are 
intended to be shared children of multiple SVG elements or dSVG UI controls. If an 
element has the dSVG attribute 'share', equal to the 'id' attribute of a dSVG 'share' 
element, then the children of that 'share' element are treated as children of the element 
with the 'share' attribute. Note that the children of the 'share' element are not copied--they 
exist only in one location and are shared, like "virtual" children. 
O.ENTITY % shareExt "" > 

<!ELEMENT dsvgrshare (%UIControls;|%Behaviors;|dsvg:item)* > 
<!ATTLIST dsYg:share 
%stdBehaviorAttrs; > 

Figure 15 shows a listBox 190 and a comboBox 191, both sharing the same 'item' 
elements as their children. The share element is used to share a group of items with 
multiple elements. The document in this example shares the same set of items with the 
combo box and the list box. Associate a share element with other elements by addmg a 
share attribute to the element that references the share element The example is provided 
below: 

<?xml version="1.0" standalone="iio"?> 

<!DOCTYPE svg SYSTEM "../SVGdSVG.dtd"> 

<svg xmlns:dsvg="http://www.corelxom/schemas/2002/dSVGl 1" 

xmhis:xlink="http://www.w3.org/1999/xlink" height="450px" width="744px" 

onload="init(evt)" viewBox="0 0 744 450"> 
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<script type="text/ecmascript" xlink:href="dsvgll/dSVG.js"y> 
<script type="text/ecmascript" xlink:href="dsvgl l^aseUI.js"/i> 
<script type="text/ecmascript" xlink:href="dsvgl l/constraint.js"/> 
<script type="text/ecmascript" xlink:hre^"dsvgl l/listbox.js"/> 
<script type="text/ecmascript" xlink:hre^"dsvgl l/button.js"/> 
<script type="text/ecmascript" xlink:href="dsvgl l/contextMenu.js"/> 
<scripttype="text/ecmascript" xlink:href="dsvgl l/scrollbar.js"/> 
<script type="text/ecmascript" xlink:href="dsvgl l/slider.js"/> 
<script type="text/ecmascript" xlink:href="dsvgl l/combobox.js"> 
<script type="text/ecmascript" xlink:hre^"dsvgl l/textbox.js"/> 

<!— Adding Template —> 
<g id- 'template"> 

<rectheight="40" width="744" y="0" x="0" fill="#5f86Bl" 

id="rect_Title"/> 

<text y="25" x="20" font-weight="bold" font-size="18" fill=" white" 
id="TITLE">dSVG sample: Share element 
</text> 

<liney2="350" x2="744" yl="350" opacity="1.0" stroke-width="2" 
stroke="#5F86Bl" fill="#5F86Bl" id="bottomLine"/> 

<text y="370" x="20" font-size="12" id="defaut_ex">The share element 
used to share a group of items with multiple elements. 

</text> 

<text y="395" x="20" font-size=" 12" id="small_ex">This document 
shares the same set of items with the combo box and the list box. 
</text> 

<text y="420" x="20" font-size-." 12" id="large_ex">Associate a share 
element with other elements by adding a dsvg:share attribute to the element that 
references the share element. 

</text> 
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</g> 

<!-- adding controls — > 

<dsvg:share id=="share_l"> 

<dsvg:item value=F"STOP" data="red" id="item_l "> 

<dsvg:iteniData value="Octagon" name="shape"/> 
</dsvg:item> 

<dsvg:item value=" YIELD" data="yellow" id="item_2"> 
<dsvg:itemData value="Triangle" name="shape"/> 
</dsvg:item> 

<dsvg:item value="GO" data="green" id="item_3"> 

<dsvg:itemData value="Circle" nanie="shape"/> 
</dsvg:item> 
</dsvg:share> 

<dsvg:listBox dsvg:share="share_l" 
xlink:hrefe="dsvgl l/skinListBox_Composite.svg#skinListBox" autoScale="true" 
height="60" width="198" y="70" x="50" label="List box: (default attributes with the 
added attribute dsvg:share)" id="listbox_l"/> 

<dsvg:comboBox dsvg:share="share_l " 
xlink:href="dsvgll/skinComboBox_Composite.svg#skinComboBox" autoScale="true" 
height="17" width="217" y="220" x="50" label="Combo box: (default attributes with the 
added attribute dsvg:share)" id="combobox_l "/> 

<ysvg> 

Passive Attributes 27 

A common feature m a web application is to be able to zoom and pan on the 
content without the UI controls zooming and panning. This capability does not exist in 
SVG markup. Scripting is required to detect the SVGScale, SVGScroll and SVGResize 
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events, and create a transformation on all elements that should be immime to zooming and 

panning, which will counteract the zoom or pan. 

A passive attribute 27 is applied to one or more DOM elements for applying 

passive behavior to objects in a web appUcation. By adding a passive attributes 27 to an 
5 element, other elements can then reference the passive attribute 27. Referencing 

attributes will be discussed below. 

For example, if there is a legend placed in the bottom comer of the screen on a 

map, the 'g' (group) element that contains the legend subtree could be given the passive 

attributes zoom="false" and pan="false". Thiis, if the map were then zoomed or panned, 
10 the legend would continue to stay at the bottom comer of the screen. 

The following attributes can be applied to an element in a DOM: 

<!ENTITY % stdDSVGAttrs" 

dsvg:drag %Boolean "false" 

dsvg:focus %Boolean "false" 

15 dsvgrfocusGroup ID #IMPLIED 

dsvg:share ID #IMPLIED 

dsvg:zoomAndPan (disable | magnify) "magnify" > 

drag = "(true I false)" 

20 Specifies whether the element is movable (true) or not (false) by clicking and 

dragging it with the mouse. 

focus = "(true | false)" 

Specifies whether the element has been selected or not. Selecting any object which 
has the 'focusGroup' attribute, via the event specified in the 'focus* element (e.g. 
25 onmouseover, onclick, etc.), does the following: causes its Tocus* attribute to be 

set to "tme", sets the 'focus' attribute of other elements belonging to the same 
focusGroup to "false" and sets the 'focus' element's 'elenaentlD' to be the ID of the 
element with focus. 

focusGroup = "name" 
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Specifies the 'id' attribute of the associated 'focus' element. Selecting any object 
which has the 'focusGroup' attribute, via the event specified in the 'focus* element 
(e.g. onmouseover, onclick, etc.), causes its 'focus' attribute to be set to "true", sets 
the 'focus' attribute of other elements belonging to the same focusGroup to "false" 
. and sets the 'focus' element's 'elementID' to be the ID of the element with focus, 
share = "name" 

Specifies the 'id' attribute of an existing 'share' element, causing the share 
element's children to be treated as children of this element as well. The children 
are not copied— they are instead used, or shared, by multiple elements. 
zoomAndPan = "(disable I magnify)" . 

Specifies whether the element is immime to zooming and panning (disable) or not 
(magnify). 

The *drag' attribute 

The 'drag' attribute specifies whetiier the element is movable (true) or not (false) 
by clicking and dragging it with the mouse. Figures 16A and 16B show a circle 201 and 
button 202 that are draggable, as well as a circle 203 and button 204 that are not 
draggable. The drag attribute is applied to elements to set the drag to either true or false. 
The example is provided below: 
<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg SYSTEM "../SVGdSVG.dtd"> 
<:svg dsvg:drag="true" xmlns:xlink="http://www.w3. org/1 999/xlink" 
xmhis:dsvg="http://www.coreLcom/schemas/2002/dSVGl 1" height="420px" 
width="760px" onload="mit(evt)" viewBox="0 0 760 420"> 

<script type="text/ecmascript" xlink:hre^"dsvgl l/dSVG.js"/> 
<script type="text/ecmascript" xlink:href="dsvgl l/baseUI.js"> 
<script type="text/ecmascript" xlink:href="dsvgl l/constraint.js"/> 
<script type="text/ecmascript" xlink:href="dsvgl l/button.js"/> 
<script type="text/ecmascript" xlink:href="dsvgl l/attributeDrag.js"/> 
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<!— template ~> 



<rectheight="40" width="744" y="0" x="0" fill="#5f86Bl" id="title_rect"/> 
<texty="25" x="20" fpnt-weight="bold" font-size="18" fill="white" 
id="text_l ">dSVG sample: drag (added attribute) 
</text> 

<text y="365" x="20" font-size="12" id="content">Content of file: dsvg:drag 
</text> 

<text y="380" x="20" font-size="12" id="expected">The dsvg:drag attribute is 
applied to elements to set the drag to either true or false. 

</text> 

<texty="395" x="20" font-size="12" id="depend"/> 

<line y2="340" x2="744" yl="340" xl="0" stroke-width="2" stroke="#5f86Bl 
fiU="#5f86Bl" id="bottom_line"/> 

<!— adding behavior —> 

<circle dsvg:drag="true" r="30" cy="150" cx="100" stroke-width="5" 
stroke="darkblue" fill="#5f86Bl" id="circle_true"A> 

<circle dsvg:drag="false" r="30" cy="270" cx="100" stroke-width="5" 
stroke="darkred" fill="red" id="circle_false"/> 

<dsvg:button dsvg:drag- 'true" 
xlink:href="dsvgl l/skinButton_Windows.svg#skinButton" autoScale="true" 
disabled="false" selected="false" toggle="false" height="18" width="100" y="140" 
x="300" label="drag (true)" id="button_true"> 

<dsvg:button dsvg:drag="false" 
xlink:href="dsvgll/skinButton_Windows.svg#skinButton" autoScale-'true" 
disabled="false" selected="false" toggle="false" height^" 18" width="100" y="260" 
x="300" label="drag (false)" id="button_false"/> 

<text y=".l 10" x="20" id="text_true">Blue curcle has dr^"true" 
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</text> 

<text y="230" x="20" id="text_true2">Red circle has drag="false" 

</text> 

<text y="l 10" x="300" id="text_true3">Button has drag="true" 
</text> 

<text y="230" x="300" id="text_true4">Button has drag="false" 
</text> . 

<text y="70" x="20" id="text_frue5">Select each of the objects and attempt to 
drag to another position. 
</text> 

</svg> 

The 'focus' attribute 

The 'focus' attribute specifies whether the element has been selected or not. Selecting any 
object which has the 'focusGroup' attribute, via Ae event specified in the 'focus' element 
(e,g. onmouseover, oncUck, etc.), does the following: causes its 'focus' attribute to be set 
to "true", sets the 'focus' attribute of other elements belonging to the same focxisGroup to 
"false", and sets the 'focus' element's 'elementID' to be the ID of the element with focus. 

Figures 17A and 17B show circle and text elements in different focus groups, each 
setting the other. The example is provided below: 
<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg SYSTEM "../SVGdSVG.dtd"> 
<svg xmhis:xlink="http://www.w3 .org/1 999/xlink" 

xnJns:dsvg="http://www.corel.com/schemas/2002/dSVGll"height="410px" 

width="744px" onload="init(evt)" viewBox="0 0 744 410"> 

<script type="text/ecmascript" xlink:href="dsvgl l/dSVG.js"A> 
<script type="text/ecmascript" xlink:href="dsvgl l/baselJI.js"/> 
<scripttype="text/ecmascript" xlink:href="dsvgll/constraint.js"/> 
<script type="text/ecmascript" xlink:href="dsvgl l/focus.js"/> 
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<script typ^"text/ecmascript" xlink:href="dsvgl l/setAttribute.js"/> 
<script type="text/ecmascript" xlink:href="dsvgl l/setStyle.js"/> 
<script type="text/ecmascript" xlink:href="dsvgl l/setTransform.js"A> 

<!-r template — > 

<rect height^MO" width="744" y="0" x="0" fill="#5f86Bl " id="title_rect"/> 
<text y="25" x="20" foiit-weight="bold" font-size=" 1 8" fill=" white" 
id="text_r'>dSVG sample behavior: focus - with added attributes focusGroup and focus 
</te3ct> 

<texty="365" x="20" font-size="12" id="content">Contentof file: dsvgrfocus, 
dsvg:setTransfonn, dsvg:setAttribute, dsvg:setStyle, (added attributes dsvg:focus, 
dsvg:focusGroup) 

</text> 

<text y="380" x="20" font-size=" 12" id="expected">The dsvg:focusGroup 
attribute adds the ability to store the ID of similar type elements that are assigned to that 
group. 

</text> 

<text y="395" x="20" font-size="12" id="depend">Default focus can be given to 
an element (red circle above) by adding the dsvg:focus attribute to that element. 
</text> 

<line y2="340" x2="744" yl="340" xl="0" stroke-width="2" stroke="#5f86Bl" 
fill="#5f86Bl" id="bottom_line"/> 

<!-- adding behavior —> 

<text y="250" x="20" font-size=" 12" id="desc">The red, blue, green circles are 
part of the focusGroup. The orange circle is not. 
</text> 
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<text y="150" x="200" font-size="12" id="desc_2">Click on the red, green and 
blue circles to set focus. 

</text> 

<text y=" 1 70" x="200" font-size=" 12" id="desc_3">Hover over the 'red', 'green* 
and 'blue' text elements to set focus. 
</text> 

<dsvg:focus elementID="redCircle" event="onclick" id="circleGroup"> 

<dsvg:setTransformscale="1.2" vAUgn="middle" hAlign="middle" 

absolute^"true" elementID="%circleGroup@elementID%"/i> 

<dsvg:setTransfonn scale=" 1 " vAUgn="middle" hAlign="middle" 

absolute="true" elementID="%circleGroup@previousID%"/> 

<dsvg:setAttributevalue="%(circleGroup@element[D)@fill%Text" 

attribute="elementID"elenientID="textGroup"/> 

</dsvg:focus> 

<iisvg:focus even^"onmouseover" id="textGroup"> 

<dsvg:setStylevalue="%(textGroup@elementID)@cdata%" 

property="fill" elementIE)="%textGroup@elementID%"> 

<dsvg:setStyle value="black" property="fiir 

elementID="%textGTOup@previouslD%"/> 

<dsvg:setAttributevalue="%(textGroup@elemenaD)@cdata%Circle" 

attribute="elementID"elementID="circleGroup"/> 

</dsvg:focus> 

<Circle dsvg:focus="true" dsvg:focusGroup="circleGroup" r="30" cy=" 1 00" 
cx="50" fill="red" id="redCircle"/> 

<circle dsvg:focusGroup="circleGrpup" r="30" cy="200" cx="50" fill="blue" 

id="blueCircle"/> 

<circle dsvg:focusGroup="circleGroup" r="30" cy="100" cx="150" fill="green" 

id="greenCircle"/> 

<circle r='*30" cy="200" cx="150" fill="orange" id="orangeCircle"/> 
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<text dsvg:focus="true" dsvg:focusGroup="textGroup" y="80" x="200" 
id="redText">red</texl> 

<text dsvg:focusGroup="textGroup" y="80" x="250" id="blueText">blue</text> 

<textdsvg:focusGroup="textGroup" y="80" x="300" 
id="greenText">green</text> 

<text y="80" x="350">orange</texC> 

</svg> 

The *focusGrpup' attribute 

The 'focusGroup' attribute specifies the 'id' attribute of the associated 'focus' 
element. Selecting any object which has tiie 'focxxsGroup' attribute, via the event specified 
in the 'focus' element (e.g. onmouseover, onclick, etc.), does the following: causes its 
'fociK* attribute to be set to "true", sets the 'focus' attribute of other elements belonging to 
the same focusGroup to "false", and sets the 'focus' element's 'elemenflD' to be the ID of 
the element with focus. 

The 'share' attribute 

The 'share* attribute specifies the 'id' attribute of an existing 'share' element, 
causing the child elements of the 'share' element to be treated as children of this element 
as well. The children are not copied~they are instead used, or shared, by multiple 
elements. Figure 15 shows a listBox 190 and a comboBox 191, both sharing the same 
'item' elements as their children. The example is provided below: 
<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg SYSTEM "../SVGdSVG.dtd"> 
<svg xmliis:dsvg="ht^://www.corel.com/schemas/2002/dSVGH " 
xmhis:xlink="http://www.w3.org/1999/xlink" height="450px" width="744px" 
onload="init(evt)" viewBox="0 0 744 450"> 

<script type="text/ecmascript" xlink:href="dsvgl l/dSVG.js"/> 
<script type="text/ecmascript" xlink:href="dsvgl l/baseUI.js"/> 
<script type="text/ecmascript" xlink:href="dsvgl l/constraint.js"/> 
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<script type="text/ecmascript" xlink:hre^"dsvgl l/listbox.js"/> 
<Sciipt type="text/ecmascript" xlink:href="dsvgl l/button.js"/> 
<script type="text/ecmascript" xlink:href="dsvgl l/contextMenu.js"> 
<script type="text/ecmascript" xlink:href="dsvgl l/scrollbar.js"/i> 
<script type="text/ecmascript" xlink:href="dsvgl l/slider.js"/> 
<script type="text/ecmascript" xlmk:href^"dsvgl l/combobox.js"/> 
<script type="text/ecmascript" xlink:href="dsvgl l/textbox.js"/> 

<!- Adding Template --> 
<g id="template"> 

<rect height="40" width="744" y="0" x="0" fill="#5f86B 1 " 

id="rect_TiUe"/> 

<text y="25" x="20" font-weight="bold" font-size=" 1 8" fill="white" 
id="TITLE">dSVG sample: Share element 
.<text;> 

<line y2="350" x2="744" y 1="350" opacity=" 1 .0" stroke-width="2" 
stroke="#5F86Bl " mi="#5F86Bl " id="bottomLine"/> 

<text y="370" x="20" font-size="12" id="defaut_ex">The share element is 
used to share a group of items with multiple elements. 

</text> 

<texty="395" x="20" font-size="12" id="small_ex">This docviment 
shares the same set of items with the combo box and the list box. 
</text> 

<text y="420" x="20" font-size=" 12" id="large_ex"> Associate a share 
element with other elements by adding a dsvg:share attribute to the element that 
references the share element. 

</text> 

</g>. 

<!-- adding controls — > 
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<dsvg:share id="share_r'> 

<dsvg:item value="STOP" data="red" id="item_l"> 

<dsvg:itemDatavalue="Octagon" name=" shape" A> 
</dsvg:item> 

<dsvg:item value="YIELD" data="yellow" id="item_2"> 
<dsvg:itemData value="Triangle" name="shape"/> 
</dsvg:item> 

<dsvg:item value="GO" data="green" id="itein_3"> 

<dsvg:iteinData value="Circle" niame="shape"/> 

</dsvg:itein> 
</dsvg:share> 

<dsvg:listBox dsvg:share="share_l " 
xlink:href="dsvgll/skinListBox_Composite.svg#skiiiListBox" autoScale="true" 
height="60" width="198" y="70" x="50" label="List box: (defaxxlt attributes with the 
added attribute dsvgtshare)" id="listbox_l "/> 

<dsvg:comboBox dsvg:share="share_l " 
xluik:href="dsvgl l/skmComboBox_Composite.svg#skinComboBox" autoScaae="true" 
height="17" width="217" y="220" x="50" label="Combo box: (default attributes with the 
added attribute dsvg:share)" id="combobox_r'/> 
</svg> . 

The 'zoomAndPan' attribute 

The 'zoomAndPanAttribute' attribute specifies whether the element is immune to zooming 
and panning (disable) or not (magnify). 

Figures 18A and 18B shows two circles 205 and 206, one of which 205 is immune 
to zooming and panning. The zoom element will zoom in / zoom out by the amount 
specified in the scale attribute. The example is provided below: 
<?xml version="1.0" standalone="no"?> 
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<!DOCTYPE svg SYSTEM ":./SVGdSVG.dtd"> 

<svg xmlns:dsvg="http://www.corel.coin/schemas/2002/dSVGl 1" 

xmlns:xliiik="http://www.w3.org/1999/xUiik" height="410px" width="744px" 

6nlo.ad="init(evt)" viewBox="0 0 744 410"> 

<script type="text/ecmascript" xlink:href="dsvgl l/dSVG.js"/> 
<script type="text/ecmascript" xlink:href=''dsvgl l/baseUI.js"/> 
<script type="text/ecinascript" xlink:href="dsvgll/constraint.js"/> 
<script type="text/ecmascript" xlink:hre^"dsvgl l/zoom.js"/> 
<scripttype="text/ecmascript" xlink:href="dsvgll/attributeZoomAndPan.js"/> 
<script type="text/ecmascript" xlink:href="dsvgl l/button.js"/> 

<!-- template — > 

<rectheight="40" width="744" y="0" x="0" fill="#5f86Bl" id="title_rect'7> 
<texty="25" x="20" font-weight="bold" font-size="18" fill="white" 

id="text_l">dSVG sample: zoomAndPan (added attribute) 

</text> 

<text y="365" x="20" font-size=" 12" id="content">Content of file: dsvg:zoom, 
dsvg:zoomAndPan 

</text> 

<texty="380" x="20" font-size="12" id="expected">The dsvg:zoom element will 
zoom in / zoom out by the amount specified in the scale attribute. 
</text> 

<texty="395" x="20" font-size="12" id="depend"/> 

<line y2="340" x2="744" yl="340" xl="0" stroke-width="2" stroke="#5f86Bl" 
fill="#5f86Br id="bottom_line"/> 

<!— adding behavior — > 
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15 



20 



25 



«isvg:button dsvg:zoomAndPan="magnify" 
xlink:href="dsvgl l/skinButtonZoomIn.svg#skmButtonZoomIn" autoScale="true" 
disabled="false" selected=" false" toggle="false" height="21" width="20" y="100" 
x="120" label="zoom in" id="button_in"> 

<dsvg:zoom type="relative" cy="50.5" cx="50.5" scale="2" 
id="dsvgUiiiqueID_2"/> 
</dsvg:button> 

<dsvg:button xlink:href="dsvgl l/skinButtonZoomOut.svg#skinButtoiiZoomOut" 
autoScale="true" disabled="false" selected="false" toggle="false" height="21" 
width="20" y=" 100" x=" 1 70" label="zoom out" id="button_out"> 

<dsvg:zoom type="relative" cy="50.5" cx="50.5" scale="0.5" 
id="dsvgUniqueID_3 "/> 
</dsvg:button> 

<circle dsvg:zooinAndPan="disable" r="30" cy="200" cx=" 1 80" 
stroke-width="5" stroke="darkred" fiU="red" id="circle_disabled"/> 

<circle dsvg:zooinAndPan="inagiiify" r="30" cy="200" cx="350" 
stroke-width="5" stroke="darkblue" fill="#5f86Bl " id="circle_inagnified"/> 

<text y="330" x="20" font-size="10" id="zoom_text">dsvg:zoomAndPaii 
attributes applied to: Red circle (disabled) Blue circle (magnify) 

20 </text> 

y="80" x="50" font-size="10" id="zoom_textl">Selectthe Zoom In / Zoom 

Out buttons. 

</text> 

</svg> 

25 

Other items may be added to the collection of designated items. For example, 
behavior elements and user interface control elements may be added along with their 
associated scripts. 

In the example described above, the ftmction was dynamically generated, i.e., a 
30 string was created, having the same prefix as the designated element (without the colon) 
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and the same name as the designated element (except with the first letter capitalized) and 
with the designated element's object and the trigger event object passed in as two 
parameters. The associated script 38 or set of instructions for the operations of the 
generated function is stored in a predetermined format either in the document text file or 
in a separate text file on a file system or webserver, and is loaded into memory by the 
viewer at load time. Alternatively, the initialization function may search for elements that 
begin with the "dsvg:" prefix and, using an 'if or 'sv^tch' statement, determine the 
appropriate predetermined function to call, which again are expected to have been already 
loaded in memory by the viewer. 

It is advantageous, though, for the function names to be generated dynamically, so 
that the main script file containing the initialization function 21 does not need to be 
updated whenever a new type of designated element 39 has been created and is available 
for use. 

As well, while the functions 38 that handle each type of designated element 38 
could be stored all in one file, it is advantageous to store them in separate files and 
reference them in the document only if their corresponding designated element 38 is 
being used, so that only the code that is required is actually transmitted. 

In order for designated elements 38 to execute desired actions, behavior elements 
may be inserted as children of the designated elements 38 (the observer elements). The 
behavior element will be executed sequentially for each behavior element whose 'event' 
attribute's value matches the observer element's event (e.g., onmouseover, onclick, etc.). 
If the 'event' attribute is not provided, the behavior will default to be run on the 'onclick' 
event. In the example below, clicking on the 'buttonZoomIn' button v^U cause the 
processing of the child elements of the button, and the zoom behavior will be executed, 
scaling the document by a factor of 2, while clicking on the 'buttonZoomOut' button will 
scale the document by a factor of 0.5 . 

<dsvg:button id="buttonZoomIn" x="10" y="10" label="Zoom In" 
xlink:href="#skinZoomInButton"> 
<zoom scale="2"/> 
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</dsvg:button> 

<dsvg:button id="buttonZoomOut" x=" 1 0" y="40" label="Zoom Out" 
xlink:href="#skinZoomOutButton"> 

<zoom scale="0.5"/> 
</dsvg:button> 

Alternatively, the behavior elements may be grouped as children of an <action> element 
(or behavior element), which can be hooked up to the observer element using a <listener> 
element. For example: 

<dsvg:button id="buttonZoomIn" x="10" y="10" label="Zoom In" 

xlink:hre^"#skinZoomInButton"/> 

<dsvg:button id="buttonZoomOut" x="10" y="40" label="Zoom Out" 
xlink:href="#skinZoomOutButton"/> 

<dsvg:action id="zoomIn"> 
<zoom scale="2"> 
</dsvg:action> 

<dsvg:action id="zoomOut"> 
<zoom scale="0.5"/> 
</dsvg:action> 

<dsvg: listener event="onclick" observerElementID="buttonZoomIn" 
handlerID="zoomIn"/> 

<dsvg:listener event="onclick" observerElementID="buttonZoomOut" 
handlerID="zoomOut"/> 

Thus, during the document load, the onclick event of the buttonZoomOut element 
is associated with the zoomOut action, via the listener that identifies 
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observerElementID="buttonZoomOut". When this button is clicked, the children of the 
zoomOut action will be processed, scaling the document by a factor of 0.5. 

Figure 19 shows an example of a method of extending the interactivity of a 
presentation markup language at load time (40) in accordance with the SVG interactivity 
extension system 20, 30. At load time, after the viewer has finished building the DOM 
and loading the script, the method (40) begins with an imtiali2ation function being run by 
the viewer's script interpreter, which determines if the first DOM element is a designated 
element (41). If a designated element is found (42), then the name of the function 
associated with the designated element is automatically generated (43) (in accordance 
with a predetermined function naming convention) and called (44). Preferably, the 
predetermined function naming convention is similar to the predetermined element 
naming convention. If a designated element is not found (42), or after a generated 
function is called (44), the method determines if there are more elements in the DOM to 
search (45). If there are more elements in the DOM (45), the method determines if the 
next sibling element is a designated element (46). The process is repeated until all 
elements in the DOM are searched. Once there are no more elements in the DOM to 
search (45), then the method is done (47). 

Figure 20 shows an example of a method of extending the interactivity of 
presentation markup languages (50) (e.g., SVG, HTML), in accordance with the SVG 
interactivity extension system 20, 30. The method (50) manipulates a DOM of a web 
application in response to an event. The event may be the "onload" event when a DOM is 
loaded into a viewer 13. The SVG interactivity extension system 20, 30 is built on top of 
an event-driven architecture, such as SVG and XML. Once an event occurs on an SVG 
element (i.e., the observer element), the method (50) begins with passing the event object 
to a handler function (51). The handler function determines if the first child element of 
the SVG element associated with the object is a designated element (52). If a designated 
element is foimd (53), then the handler function determines if the event attribute 24 of the 
designated element is equal to the event that has occurred (54). If the event attribute 24 of 
the designated element is equal to the event which triggered this method (50), then the 
name of the function associated with the designated element is automatically generated 
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(55) (in accordance \yith a predetermined function naming convention) and called (56). 
Preferably, the predetermined fimction naming convention is similar to the predetermined 
element naming convention. If a designated element is not foimd (53), or if the event 
attribute 24 of the designated element does not match the trigger event (54), or after a 

5 generated function is called (56), the event handler determines if there are more child 
elements of the observer element to search (57). If there are more child elements of the 
observer element (57), the event handler determines if the next child is a designated 
element (58). Steps (53) to (58) are repeated imtil all child elements of the observer 
element are searched. Once there are no more child elements to search (57), then the 

10 handler function is done (59). 

An initialization file may be added to also search for designated attributes in SVG 
elements. Instructions 38 may be created and associated with the *dsvg' attribute in the 
same manner as with UI control elements. Instructions (or script functions) 38 for 'dsvg' 
attributes only operate on the object associated with the existing element to which a 

15 ' 'dsvg' attribute is added. A designer may add the 'dsvg' attribute m an SVG file, or any 
other XML file to be parsed by the viewer 13. 

Figure 21 shows another example of an method of extending the interactivity of 
presentation markup languages (60) (e.g., SVG, HTML), in accordance with the SVG 
interactivity extension system 20, 30, The method (60) manipulates a DOM of a web 

20 application. After a user (or designer) marks up an SVG file using the markup syntax of 
the SVG interactivity extension system 20, 30 and the SVG file is loaded into a viewer 
13, the viewer 13 creates an "onload" event which is received by an <svg> element. The 
method (60) begins with an initialization function. A dsvglnitQ initialization function 21 
is called (61) by the viewer's script interpreter 14, which traverses the nodes of the DOM 

25 of the SVG file. The initialization function determines if the first DOM element is a 

designated element 29, 39 (62). If a designated element 39 is found (63) and the * event' 
attribute of the designated element 28 is set to "onload" (64), then the name of the 
function or instruction 38 associated with the designated element 29, 39 is automatically 
generated (65) (in accordance with a predetermined function naming convention) and 

30 called (66). Preferably, the predetermined function naming convention is similar to the 
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predetermined element naming convention. If a designated element 29, 39 is not found 
(63), the initialization function determines if the regxilar SVG element contains any 
designated attributes 27 (67) (which begin with the "dsvg:" prefix). If any designated 
attributes 27 are found (67) (e.g., dsvg:toolTip="#skinTooItip_traditional"), then the 
names of the functions 37 associated with the designated attributes are automatically 
generated (68) (again, in accordance with a predetermined function naming convention) 
and called (69). 

If a designated attribute 27 is not foimd (67), then the initialization file determines 
if the regular SVG element has any child elements (70). If the regular SVG element has a 
child element (70) and the child element is a designated element 29, 39 (71), then the 
initialization file determines the value of the designated element's 'event' attribute (i.e., 
the event that will trigger the execution of the designated element's associated function) 
and adds that event listener to the parent SVG element (72) (via the addEventListenerQ 
DOM API). If the child element is not a designated element 29, 39 (71), then the 
initialization file determines if there are any other children of the regular SVG element 
(73). If there are more children (73), then the initialization file searches the next child of 
the regular SVG element (74). Steps (71) to (74) repeat until there are no more children 
of the regular SVG element. 

If there are no more children of the regular SVG element (73), or after a generated 
function is called (76, 79), or if the event attribute of a designated element is not equal to 
"onload" (74), or there are no more child elements in a regular SVG element to search 
(70), the initialization file determines if there are more elements in the DOM to search 
(75). If there are more elements in the DOM (75), the initialization file determines if the 
next sibling element is a designated element (76). Steps (73) to (76) are repeated until all 
elements in the DOM are searched. Once there are no more elements in the DOM to 
search (75), then the initialization function is done and the viewer 13 waits for an event to 
occur (77). 

Once an event occurs on an SVG element (i.e., the observer element), that event 
object is passed to a handler function with which it has been associated (78). The handler 
function determines if any child of the observer element is a designated element 29, 
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39 (79). The event handler function calls the appropriate code or script 28, 38 (as 
described in Figure 6) for any child of the observer element that is a designated element 
29, 39 (80). Once all children of the observer element are processed (80), then the event 
handler ftinction is done and the viewer waits for another event to occur (77). 

5 

Rftferancinp Attributes 

To create an application, a designer often desires to reference the current value of 
another element's attributes. An expression syntax is created to allow the attribute values 
of elements to be dynamic. With expressions, attribute values can be dependent on the 
1 0 real-time values of other attributes in the DOM: This syntax is intended to be simpler to 
use than XPath and ECMAScript, and to provide a subset of their most commonly used 
features. 

In one embodiment of an expression syntax, expressions are denoted by the %% 
characters. Whatever is contained with the % characters gets evaluated. The basic unit of 
15 reference is elementID@attributeName. For example, %myRectangle@width% would be 
resolved to the numeric value of the width attribute of the element //.[ @id = 
"myRectangle"] (as denoted with the XPath expression). This syntax is therefore 
intended to be used in documents where elements have unique ID's. Note that the 
attributeName can have a namespace prefix for any namespace declared m tiie document. 
20 Preferably, the following vinit pattern is used for the expression syntax: 

elementID@attributeName | elementID@nameSpace:attributeName 
Some behaviors, like 'loadXML', can create document fragments. These are 
named at the time of creation and can be referred to within %% expressions, as follows: 

docID.elementID@nameSpace:attributeName 
25 special attribute extensions include a bounding box, CDATA (the text between 

the opening and closmg tags, e.g. <tex^This is the CDATA</text>), and event attributes. 
The boxmding box extensions include the following: 

elementID@bbox.x : returns the x-coordinate of the element's bounding box (i.e. 

the left) 
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elementID@bbox.y : returns the y-coordinate of the element's bounding box (i.e. 

the top) 

elementID@bbox. width : returns the width of the element's bounding box 
elementID@bbox.height : returns the height of the element's boimding box 
5 A CDATA extension includes: 

elementID@cdata : returns the text content of the element 
Event Attribute extensions included the following: 

@event.type: returns the type of event that triggered the behavior (e.g. 
'mouseover', 'SVGResize', 'keypress', etc.) 
1 0 @event.targetNodeName: returns the nodeName of the element that was the 

target of the e vent that triggered the behavior 
@event.targetID: returns the 'id' attribute of the element that was the target of 

the event that triggered the behavior 
@event.currentTargetNodeName: returns the nodeName of the element that 
1 5 observed the event that triggered the 

behavior 

@event.currentTargetID: returns the 'id' attribute of the element that observed 

the event that triggered the behavior 
@event.shiftKey: returns 'true' if the Shift-key is pressed, 'false' otherwise. 
20 @event.ctrlKey: returns 'true' if the Ctrl-key is pressed, 'false' otherwise. 

@event.keyCode: returns the keyCode attribute of the 'keydown' or 'keyup' 

event that triggered the behavior. 
@event.keyID: returns the key identifier-a string representation of the 

keyCode attribute of the 'keydown' or 'keyup' event that 
25 trijggered the behavior (e.g. 'Space', 'Enter*, 'a'). 

@event.charCode: returns the charCode attribute of the 'keypress' event that 

triggered the behavior. 
@event.char: returns the string representation of the charCode attribute of the 
'keypress' event that triggered the behavior (e.g. 'A' or 'a'). 
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The real event object has 'target' and •currentTargef attributes, which are node 
objects. Since these would only be useful in a scripting environment, the "virtual" event 
attributes WgetNodeName', 'targetID', 'currentTargetNodeName' and 'currentTargetlD' 
are provided. 

A keyGode event attribute may be automatically generated in response to the 
'keydown* and 'keyup' events. For ease of authoring, dSVG offers a "virtual" event 
attribute called 'keylD', which is a string identifier for the various keys. These keylD's 
resemble, as closely as possible, the key identifiers listed in the W3C Working Draft of 
the DOM Level 3 Events Specification 

(http://www.w3:org/TR/2003/WD-DOM-Level-3-Events-20030331/keys^^ 

An attribute consists of constant string data concatenated with evaluated 
expressions delimited by % symbols (a double %% acts as an escape). For example: 

attribute="constant_one% expression_one %constant_two% expression_two 
%constant_three" 
Each resolution expects an expression of the form: 

% complex_expression % 
where complex_expression can be of the form: 

% simple_expression % 

or: 

% simple_expression ( complex_expression ) simple_expression % 
Parentheses are resolved from innermost to outermost. Note that open parentheses 
require leading whitespace to distinguish them fi'om functions. 
An example of a simple expression is: 

simple_expression = [ strmg, Unit^Pattem, function, variable ] ( OpCode [ 
string, Unit_Pattem, function, variable ] )* 
An esxample of a string is: 

string = 'some string data' resolves to some string data 
An example of a function is: 

function = fimctionName( params ) : resolves to a function return value 
The following ECMA math functions are available: 
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abs; acos; asin; atan; atan2; ceil; cos; exp; floor; 
log; max; min; pow; random; sin; sqrt; and tan. 
Other available functions are: 

factorial; 

5 doublefactorial; 

gcd (greatest common divisor); 
In; 
loglO; 

if( boolean expression , if_true_expression , if_false_expression ); 
10 substringC string, index_start, index_end ); and 

length( string ). 

An example of a variable is: 

variable ( form: $variableName ) = % expression % 
Variables refer to Variable' elements and are intended as a convenient way of 
15 building and (re)using complex expressions, or simply for storage. It is the author's 
responsibility to not create self referential variables or circular variable references. 
Operation codes (OpCodes) include:" 

+ : addition 
- : subtraction 

20 * : multiplication 

/ : division 
, : list separator (ie. for parameters) 

== : boolean equals 
>= : boolean greater than or equal to 
25 <= : boolean less than or equal to 

!= : boolean not equal to 
Expressions using opcodes resolve any Unit_Pattems, functions, variables and 
strings and then follow standard ecma expression rules. 

30 Syntax Expression Example #1 
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<?xml version=" 1 .0" standalone="no"?> 
<!DOCTYPE svg SYSTEM "../SVGdSVG.dtd"> 
<svgxmlns:xlink="http://www.w3.org/1999/xliiik" 

xmlns:dsvg="http://www.corel.com/schemas/2002/dSVG" height="410px" 

5 width="744px" onload="init(evt)" viewBox="0 0 744 41 0"> 

<script type="text/ecmascript" xlmk:href="dsvg/dSVG.js"/> 
<script type="text/ecmascript" xlink:hre^"dsvg/baseUI.js"/> 
<script type="text/ecmascript" xlink:href="dsvg/coiistraint.js"/> 
<script type="text/ecmascript" xlink:href="dsvg/focus.js"> 

1 0 <script type="text/ecmascript" xliiik:hre^"dsvg/setAttribute.js"/> 

<script type="text/ecmascript" xlink:liref="dsvg/setStyIe.js"> 
<script type="text/ecmascript" xlink:href="dsvg/setTraiisfonn.js"/> 

<!— template —> 

15 <rectheight="40" width="744" y="0" x="0" fiU="#5f86Bl" id="title_rect"/> 

<text y="25" x="20" font-weight="bold" font-size=" 1 8" fiU="white" 
id="text_l">dSVG sample behavior: focus - with added attributes focusGroup and 
focus</text> 

<texty="365"x="20"font-size="12"id="content">Contentoffile: dsvg:focus, 
20 dsvg:setTransform, dsvg:setAttribute, dsvgrsetStyle, (added attributes dsvg:focus. 
dsvg:focusGroup)</text> 

<text y="380" x="20" font-size="12" id="expected">The dsvg:focusGroup 
attribute adds the ability to store the ID of similar type elements that are assigned to that 
group.</text> 

25 <text y="395" x="20" font-size=" 12" id="depend">Default focus can be given to 

an element (red circle above) by adding the dsvg:focus attribute to that element.</text> 

<line y2="340" x2="744" yl="340" xl="0" stroke-width="2" stroke="#5f86Bl" 
fill="#5f86Bl'* id="bottom_line"/> 

30 <!-- adding behavior —> 
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<text y="250" x="20" font-size=" 1 2" id="desc">The red, blue, green circles are 
part of the focusGroup. The orange circle is not.</text> 

<text y="150" x='*200" font-size="12" id="desc_2">Click on the red, green and 
blue circles to set focus.</text> 

<texty="170" x="200" font-size="12" id="desc_3">Hover over the 'red', 'green* 
and 'blue' text elements to set focus.</text> 

<dsvg:focus elementID="redCircle" event=" onclick" id="circleGroup"> 

<dsvg:setTransformscale="1.2" vAUgn="middle" hAUgn="middle" 
absolute^"true" elementII>="%circleGroup@elementID%"/> 

<dsvg:setTransform scale="l" vAlign="middle" hAlign="middle" 
absolute="true" elementID="%circleGroup@previousID%"/> 

<dsvg:setAttribute value="%(circleGroup@elementID)@fill%Text" 
attribute="elementID" elementID="textGroup"/> 
</dsvg:focuS> 

<dsvg:focus event="onmouseover" id="textGroup"> 

<dsvg:setStylevalue="%(textGroup@elementID)@cdata%" 

property="fiir elementID="%textGroup@elementID%"/> - 

<dsvg:setStyle value="black" property="fill" 

elementID="%textGroup@previousID%"/> 

<dsvg:setAttributfevalue="%(textGroup@elementID)@cdata%Circle" 

attribute="elementID" elementII>="circleGroup"/> 

</dsvg:focus> 

<circle dsvg:focus="true" dsvg:focusGroup="circleGroup" r="30" cy="100" 
cx="50" fill="red" id="redCircle"/> 

<circle dsvg:focusGroup="circleGroup" r="30" cy="200" cx="50" fill="blue" 

id=r"blueCircle"/> 

<circledsvg:focusGroup="circleGroup" r="30" cy="100" cx="150" fill="green" 

id="greenCircle"/> 

<circle r="30" cy="200" cx="150" fill="orange" id="orangeCircle"> 
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<text dsvg:fociis="trae" dsvg:focusGroup="textGroup" y="80" x="200" 
id="redText">red</text> 

<text dsvg:fociisGroup="textGroup" y="80" x="250" id="blueText">blue</text> 
<text dsvg:focusGroup="textGroup" y="80" x="300" 
5 id="greenText">green</text> 

<text y="80" x="350">orange</text> 

</svg> 

Hovering the mouse over the 'text' element with id="blueText caiises the 
behaviors within the second 'focus' element to be run. When the first 'setStyle' behavior is 
10 run, its 'value' attribute, which is equal to: 

%(textGroup@elementID)@cdata% 



Syntax Expression Example #2 ^ 

<dsvg:button xlink:href=''dsvg/skinButton_Windows.svg#skinButton'' autoScale="true" 
disabled="false" selected="false" toggle="false" height="18" 



resolves to: 



%blueText@cdata% 



which then further resolves to: 



15 



blue 



20 




25 



Pushing the button will run the 'alert' behavior. Its 'message' attribute, which is 



equal to: 



message^ "%buttonl@label + ' button ' + if(buttonl ©selected = 'false* , 
'is selected', 'is not selected') 



which resolves to: 



30 



fl 



'buttonl@label + ' button * + if( false , 'is selected', 'is not selected') 
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which further resolves to: 

Evaluate button is selected 
The expression syntax allows a user to refer to real-time values of any attribute of 
any element in any accessible document or documentFragment easily without a complex 
syntax like XPath and without script. It also allows a user to manipulate them with 
mathematical operators and functions, as well as to concatenate them with strings. For 
instance, if a user had a circle element with id="my Circle" and a dSVG textBox element 
with id=="myTextBox", the user could set the circle's fill colour to be the value of the 
textBox as follows: <dsvg:setAttribute elementID="myCircle" attribute="fiU" 
value="%myTextBox@value%"/>. 

There are many advantages to the SVG interactivity extension system 20, 30. The 
SVG interactivity extension system 20, 30 assists web designers with no programming 
skills to create dynamic, interactive web applications. It also aids experienced 
programmers to create dynamic, interactive web applications much more easily and 
rapidly. Because the SVG interactivity extension system 20, 30. involves an XML 
markup language (as opposed to just script functions), the attributes and data and even the 
elements themselves can be made to be data-driven at run-time, using (at design-time) 
existing or new software that allows one to visually map input XML markup to output 
XML markup, resulting in an extensible stylesheet language transformation (XSLT) code 
(or any other language useful for XML transformations) which will actually modify the 
designated elements 29, 39 based on the input XML data/markup. 

The SVG interactivity extension system 20, 30 can also be natively-implemented, 
accessing the exposed DOM API's in the same manner as the script implementation. A 
native implementation could be much faster because unlike script, which gets interpreted 
at run-time, native code (e.g., C++ or C) gets mterpreted at compile time and gets 
optimized by the compiler. The natively-implemented SVG interactivity extension 
system 20, 30 could also access any unexposed, lower-level object model API's directly, 
rather than the exposed higher-level DOM API's, which could further improve 
performance. If natively implemented, the amount of data needed to be transferred may 
be greatly reduced, sint^e there is no script that needs to be transmitted, which is 
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especially beneficial for wireless devices with low bandwidth and small memory. Using 
a markup language for the designated elements 29, 39 is also beneficial because it allows 
for the possibility of further reducing the file size by creating a binary version of the 
markup language that employs opcodes-predetermined arrangements of bits (I's and 0*s) 
5 that correspond to particular element names and attributes. Unlike textual markup, which 
must be parsed (compared to predetermine strings/text to establish the meaning of the 
text) in order to create the DOM, binary opcodes can be compared to identical binary 
opcodes, which is much faster than string comparisons, in order to build the DOM much 
faster. 

1 0 The SVG interactivity extension system 20, 30 according to the present invention 

may be implemented by any hardware, software or a combination of hardware and 
software having the above described fimctions. The software code, either in its entirety or 
a part thereof, may be stored in a computer readable memory. Further, a computer data 
signal representing the software code which may be embedded in a carrier wave may be 

15 transmitted via a commxmication network. Such a computer readable memory and a 
computer data signal are also within the scope of the present invention, as well as the 
hardware, software and the combination thereof. 

While particular embodiments of the present invention have been shown and 
described, changes and modifications may be made to such embodirhents without 

20 departing fi-om the true scope of the invention. 
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